vue 刷新页面问题?

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

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 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容