vue 刷新页面问题?
vue一分钟刷新下这个方法,这样写是否就不用清除定时器了,该怎么清除呢,getDataList有两个接口,一个是本页面的,一个是子组件的,只刷新这两个接口这样写可行吗?
this.timer = setInterval(() => {
setTimeout(() => {
this.getDataList();
},0)
}, 60000)
回复
1个回答

test
2024-07-10
如果页面中不清除定时器,那么可能会存在一下问题:
- 可能会导致内存溢出的风险
- 会发现任务会越走越快
所以定时器还是需要清除的,在当前页面卸载前清掉就可以了
// 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
。
回复

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