答案:在 beforeDestroy 中销毁定时器(通过$once 这个事件侦听器来清除比较好)
① 为什么销毁它:
在页面 a 中写了一个定时器,比如每隔一秒钟打印一次 1,当我点击按钮进入页面 b 的时候,会发现定时器依然在执行,这是非常消耗性能的。
② 解决方案 1:
方案1:有两点不好的地方,引用尤大的话来说就是:
它需要在这个组件实例中保存这个 timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。
我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化的清理我们建立的所有东西。
mounted() {
this.timer = setInterval(() => {
console.log(1)
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
方案 2(推荐):该方法是通过$once 这个事件侦听器在定义完定时器之后的位置来清除定时器
mounted() {
const timer = setInterval(() => {
console.log(1)
}, 1000)
this.$once('hook:beforeDestroy', () => {
clearInterval(timer)
})
}
官网参考链接:https://cn.vuejs.org/v2/guide/components-edge-cases.html
mounted(){
let picker = new Pikaday({
field: this.$refs.input,
format: 'YYYY-MM-DD'
})
this.$once('hook:beforeDestory', ()=>{
picker.destory()
})
}
网友评论