Vue2 去除定时器之常用三种方式及特殊方式

一般情况去除定时器的常用的三种方式方法：创建一下三种钩子函数，一般有其中一个就足以实现清除定时器的效果beforeDestroy(){

beforeDestroy(){　
　// 离开当前路由前的操作
　　clearInterval(timer)
　　timer = null
}

destroyed(){
　　// 离开当前路由后的操作
　　clearInterval(timer)
　　timer = null
}

this.$once('hook:beforeDestroy', () => {
　　// $once一次性监听事件，触发后即关闭
　　// hook 自定义钩子函数

　　clearInterval(timer)
　　timer = null
})

建议大家常用this.$once('hook:钩子函数, ()=> {})
其本质上是执行this.$emit()并返回一个callBack()
直接用在创建实例处，也可以用于自定义组件上
如：
　　<Test @hook:mounted="loading = false" @hook:beforeUpdated="loading = true" @hook:updated="loading = false" :data="data" />

或：
　　mounted() { 
　　　　const timer = setInterval(() => { ... }, 1000);
　　　　this.$once('hook:beforeDestroy', () => clearInterval(timer);) 
　　}

特殊情况时以上均失效不可用时，我这里采用监听路由变化进而清除定时器

watch: {
            //监听路由
            $route:{
                handler(oldVal,newVal){
　　　　　　　　　　　　// 此处判断当前页面路由是否为指定路由，是则创建定时器，否则清除定时器，用在单页面
                    if (oldVal.path != '/xx/xx/xx') {
                        clearInterval(this.timer)
                        this.timer = null
                    } else {
                        this.Init();
                        this.timer = setInterval(() => {
                            this.Init();
                        }, 1000 * 30)
                    }
                },
                deep:true, // 深度监听
                immediate: true // 使监听在页面加载完成后执行，避免数据无变化或初进页面时监听不执行
　　　　　　　　　　

            }
},

第二种方式还可以使用deactiveted 函数进行清除

vue项目中，正常情况下，我们在生命周期 destroyed 中关闭即可，一旦页面中使用了keep-alive 进行缓存，此时 destroyed 会失效。需要在 deactivated 钩子函数去关闭，他是 keep-alive 特有的钩子函数。

// 开启定时器
activated(){
    this.start()
},
// 关闭定时器
deactivated(){
    clearInterval(this.timer)
}

如有不全或错误之处，欢迎指出