vue 刷新页面问题？

Question

vue一分钟刷新下这个方法，这样写是否就不用清除定时器了，该怎么清除呢，getDataList有两个接口，一个是本页面的，一个是子组件的，只刷新这两个接口这样写可行吗？

this.timer = setInterval(() => {
      setTimeout(() => {
        this.getDataList();
      },0)
    }, 60000)

Answer 1

如果页面中不清除定时器，那么可能会存在一下问题：

1. 可能会导致内存溢出的风险
2. 会发现任务会越走越快

所以定时器还是需要清除的，在当前页面卸载前清掉就可以了

// Vue2 写法
beforeDestroy() {
    clearInterval(this.timer)
}

// Vue3 写法
onBeforeUnmount(() => {
    clearInterval(timer)
})

但是以上写法可能和业务逻辑就有点脱节，因为创建和删除在两个地方，所以推荐一下写法：

// Vue2
// 启动计时器
let timer = setInterval(() => {
    // 需要做的事情
}, 1000);

// 销毁计时器
this.$once('hook:beforeDestroy', () => {
    clearInterval(timer);
    timer = null;
});

如果组件使用了 keep-alive，还需注意声明周期，keep-alive包裹下的组件，后续进入和离开 activated --> deactivated，因此需要写成 deactivated。

Answer 2

1. 为啥又要 setInterval 又要 setTimeout？每分钟都刷新的话 setInterval 就够了。
2. 定时器应该及时清除，负责切换页面时可能会重复创建定时器，造成内存泄漏等问题