1.在data种定义 timer
数据源 用来接收定时器
data () {
return {
timer: ''
}
},
2、封装清除定时器方法
clearTimer () {
this.timer && clearInterval(this.timer)
}
二、使用
方法一
1.使用
setTimer () {
// 调用之前先清除一遍定时器
this.clearTimer()
this.timer = setInterval(() => {
}, 1000)
},
2.销毁
beforeDestroy () {
this.clearTimer()
}
方法二
setTimer () {
// 调用之前先清除一遍定时器
this.clearTimer()
// 调用之前先清除一遍定时器
this.timer = setInterval(() =>
}, 1000)
this.$once('hook:beforeDestroy', () => {
this.clearTimer()
})
},
三、注意
被包含在 keep-alive
中创建的组件,会多出两个生命周期的钩子: activated 、deactivated
activated是当 keepalive 包含的组件再次渲染的时候触发
deactivated是当 keepalive 包含的组件销毁的时候触发
被缓存的组件是不会走beforeDestroy
生命周期的
这个时候就要使用 deactivated
生命周期去销毁定时器
3.1销毁
deactivated() {
this.clearTimer()
}
3.2销毁
setTimer () {
// 调用之前先清除一遍定时器
this.clearTimer()
// 调用之前先清除一遍定时器
this.timer = setInterval(() =>
}, 1000)
this.$once('hook:deactivated', () => {
this.clearTimer()
})
},