VUE 组件在路由确定并且保持缓存的情况下如何实现关闭定时器

最近在用echar做一个前端柱状图如图

 

其中echar被写成了纯组件

 

<div class="chart-wrapper">
  <bar-chart :close-flag="closeFlag" :sort-field="queryParams.sortField"  :sort-flag="queryParams.sortFlag" :week = "isoWeekData.weeks"  :team="'TP'" :equipment = "queryParams.equipment"/>
</div>

组件bar-chart的数据获取核心方法为getInfo，现在想实现3秒定时获取信息。

好，我们将面对以下几个问题：

 

1.我们的核心路由设置已经全局cache，除了手动reload（F5外）无法刷新当前页面，普通的JSload 放弃（体验太差）

 <keep-alive>

  <router-view :key="key" />
</keep-alive>

2. 因为全局的keep-alive，固页面的beforeDestory, 以及 destory都是无效方法，页面是不会被摧毁的

3. 第二点的解决方法很简单，在组件的调用页面我们可以很轻松的实现路由进出来实现desrory等方法的相同实现，类似这样

beforeRouteEnter(to,from,next){
  console.log("enter")
  next(vm => {
    vm.timer = setInterval(function(){
      vm.getData()
    } , 3000);
  })
},
beforeRouteLeave(to, from, next) {
  console.log("leave")
  clearInterval(this.timer);
  this.timer = '';
  next()
},

4.但是，在组件内部，不仅destory相关方法无效，就连路由判定都失效（因为VUE的组件加载机制），这样问题就来了：我们想象的组件是一套完成的构架，包括数据源获取都一定想写在组件内部，那么怎么才能实现呢？

 

OK，解决方法是组件属性监听:

1.在组件内部添加字段：

 

props:

closeFlag:{
  type: Boolean,
  default: false
}

然后watch：

 closeFlag: {

  handler(newVal, oldVal) {
    console.log("监控了")
    if(newVal){
      console.log("Close Timer")
      clearInterval(this.timer);
      this.timer = null;
    }else{
      console.log("Check Timer")
      if(this.timer != null) return;
      console.log("Setup Timer")
      let that = this;
      this.timer = setInterval(function(){
        that.getInfo()
      } , 3000);
    }
  },
  deep: true //对象内部属性的监听，关键。
},

让我们回到调用组件的页面

 

beforeRouteLeave(to, from, next) {
  console.log("出去了UI")
  this.closeFlag = true;
  next()
},
beforeRouteEnter(to,from,next){
  console.log("进来了UI")
  next(vm => {
    vm.closeFlag  = false;
  })
},

 

最后在调用组件的界面初始化监听值：

closeFlag:null,

一定要为null，而不为false（让全局第一次进入可以正确初始化timer）

 

 

让我们看看效果：

 

breadcrumb.vue?7ced:29 /operator/home/processcontrol/pareto

BarChart.vue?f42a:156 监控了

BarChart.vue?f42a:162 Check Timer

BarChart.vue?f42a:164 Setup Timer

7BarChart.vue?f42a:182 获取数据！

index.vue?6ced:106 出去了UI

breadcrumb.vue?7ced:29 /operator/home/processcontrol

BarChart.vue?f42a:156 监控了

BarChart.vue?f42a:158 Close Timer

index.vue?6ced:111 进来了UI

breadcrumb.vue?7ced:29 /operator/home/processcontrol/pareto

BarChart.vue?f42a:156 监控了

BarChart.vue?f42a:162 Check Timer

BarChart.vue?f42a:164 Setup Timer

220BarChart.vue?f42a:182 获取数据

 

 

完美解决！！

 （PS 现在为什么无法保存图片了？）