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

目录vue定时刷新数据,每隔5分钟执行一次vue局部定时刷新设置定时器局部刷新清除定时器总结vue定时刷新数据,每隔5分钟执行一次data(){return{timer:null...

目录

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);
 },

总结

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