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

合集 - Vue(17)

1.Vue跨域详解2023-05-162.Vue 打包后报 Uncaught SyntaxError: Unexpected token ‘＜‘2023-05-163.TypeError: Cannot read property 'upgrade' of undefined2023-04-234.Vue选日期滚动条自动定位到选定的日期位置2023-03-285.Vue根据时间戳制作倒计时15分钟2023-03-276.防抖节流utils2023-03-137.一些JS过滤方法2022-10-088.Vue全局公共服务类mixin2022-10-089.npm install报错node-sass@7.0.1 postinstall: `node scripts/build.js`2022-06-1610.vue一直处在2.9.6版本卸载不了升级不了解决方案2022-06-0811.Vue 全局避免按钮重复点击2022-05-27

12.Vue2 去除定时器之常用三种方式及特殊方式2022-05-16

13.Vue Element-ui 之 el-table自动滚动2022-05-1114.el-table自适应列宽2022-05-1315.vue工程内下载路由2021-08-0616.40% building 31/38 modules 7 active ...es\core-js\modules\es6.object.assign.jsBrowserslist: caniuse-lite is outdated.2021-08-1117.Vue监听系统是否为暗黑模式2023-12-14

收起

一般情况去除定时器的常用的三种方式方法：创建一下三种钩子函数，一般有其中一个就足以实现清除定时器的效果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)
}

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