组件中使用定时器及销毁问题(vue的问题)
2024-01-10 00:45:01
如果我们在页面A中使用了一个定时器,当从页面A跳转到页面B时,如果不手动清除这个定时器,那么它仍旧会执行,这不是我们所期望的。
通常能想到的常规解决办法就是,在data属性中定义一个timer,在代码中启动定时器,然后在组件销毁的时候清除定时器。具体代码如下:
data(){
return{ timer:null }
},
methods:{
onStartTimer(){
this.timer = setInterval( () => {
// 执行一些操作
}, 1000) } },
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
}
但是这里有两个潜在的问题:
它需要在这个组件实例中保存这个timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。
我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化地清理我们建立的所有东西。
Vue官方文档给出的解决方案是,在定义timer的时候使用$once指令监听beforeDestroy这个钩子函数。具体代码为:
methods:{
onStartTimer(){
const timer = setInterval( () => {
// 执行一些操作 }, 1000)
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
}
},
这样就解决了上面所列的两个问题。类似的这种在离开页面时需要销毁的组件都可以采用此方法。
文章来源:https://blog.csdn.net/dxn16638400024/article/details/135491403
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!