vue实现定时刷新数据,每隔5分钟执行一次

时间:2023-02-03 ~犇犇~ 人气:0

vue定时刷新数据,每隔5分钟执行一次

data() {
  return {
    timer: null
  }
},
mounted() {
   // 每隔5分钟定时刷新
   this.timer = setInterval(() => {
     this.getFxItemlist();
   }, 300000)
 },
 beforeDestroy() {
   clearInterval(this.timer);
 },
 methods: {
 getFxItemlist() {
   ...
 }
}

vue局部定时刷新

定时刷新一般都会想到定时器,vue局部定时刷新如下：

设置定时器

    timer: "",//定时器
    
    //定时器刷新待办事项
     this.timer = setInterval(() => {
      self.reload();
    }, 1000);

局部刷新

 <div class="DealtTop" v-if="isRefreshAlive">
 
 isRefreshAlive: true, //刷新
//局部刷新
    reload() {
      this.isRefreshAlive = false;
      this.$nextTick(function() {
        this.isRefreshAlive = true;
      });
    },

如果是在父子组件中，还需要加上provide / inject配合使用，如下：

 provide() {
    return {
      reload: this.reload
    };
  },

清除定时器

destroyed(){
    clearInterval(this.timer);
  },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

加载全部内容