程序化的事件侦听器
比如,在页面挂载时定义计时器,需要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看
this.timer
唯一的作用只是为了能够在beforeDestroy
内取到计时器序号,除此之外没有任何用处。
// vue2 代码中
export default {
data() {
return {
timer: null,
}
},
// 挂载
mounted() {
this.timer = setInterval(() => {
console.log('a')
}, 1000)
},
// 消亡
beforeDestroy() {
clearInterval(this.timer)
}
}
如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。
我们可以通过
$on
或$once
监听页面生命周期销毁来解决这个问题:
export default {
mounted() {
this.creatInterval('a')
this.creatInterval('b')
},
creatInterval(msg) {
let timer = setInterval(() => {
console.log(msg)
}, 1000)
// 监听消亡周期,定时器清除
this.$once('hook:beforeDestroy', function() {
clearInterval(timer)
})
}
}
使用这个方法后,即使我们同时创建多个计时器,也不影响效果。因为它们会在页面销毁后程序化的自主清除,不会造成内存泄漏。