1、在data中声明要设置的定时器名称：

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                timer: null  // 定时器名称
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },复制代码
            

        

    

2、在mounted中创建定时器：

    


        


            


            

        

        


            

                this.timer = (() => {
            

        

    

    


        


            


            

        

        


            

                // 某些操作
            

        

    

    


        


            


            

        

        


            

                }, 5000)复制代码
            

        

    

3、在页面注销时清理定时器：

    


        


            


            

        

        


            

                beforeDestroy() {
            

        

    

    


        


            


            

        

        


            

                clearInterval(this.timer);
            

        

    

    


        


            


            

        

        


            

                this.timer = null;
            

        

    

    


        


            


            

        

        


            

                }复制代码
            

        

    

然鹅，并没什么卵用，在切换页面后，定时任务依然顽强的奔跑着。

    


        


            


            

        

        


            

                beforeDestroy() {
            

        

    

    


        


            


            

        

        


            

                clearInterval(this.timer);
            

        

    

    


        


            


            

        

        


            

                this.timer = null;
            

        

    

    


        


            


            

        

        


            

                console.log(this.timer)            //输出为: null,但是任务依然在继续运行
            

        

    

    


        


            


            

        

        


            

                }复制代码
            

        

    

可能是我的姿势不对吧。害羞.jpg

经过在各大论坛一番查找发现：

通过$once这个事件侦听器在定义完定时器之后的位置来清除定时器：

    


        


            


            

        

        


            

                const timer = setInterval(() =>{
            

        

    

    


        


            


            

        

        


            

                // 某些定时器操作
            

        

    

    


        


            


            

        

        


            

                }, 5000);
            

        

    

    


        


            


            

        

        


            

                // 通过$once来监听定时器
            

        

    

    


        


            


            

        

        


            

                // 在beforeDestroy钩子触发时清除定时器
            

        

    

    


        


            


            

        

        


            

                this.$once('hook:beforeDestroy', () => {
            

        

    

    


        


            


            

        

        


            

                clearInterval(timer);
            

        

    

    


        


            


            

        

        


            

                }) 复制代码
            

        

    

哇，成功了...

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务