vue 刷新页面问题？

作者站长头像
站长
· 阅读数 24

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

this.timer = setInterval(() => {
      setTimeout(() => {
        this.getDataList();
      },0)
    }, 60000)
回复
1个回答
avatar
test
2024-07-10

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

  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。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容