vue 定时器销毁在哪一步操作,vue定时器无法停止

　　本文主要介绍了vue离开页面时如何销毁定时器，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　 vue将计时器破坏问题留在页面破坏计时器组件解决方案1解决方案2中

vue离开页面销毁定时器

　　销毁前(){

　　if(this.timer) {

　　clear interval(this . timer)；//关闭

　　}//利用vue的生命周期功能

　　Vue是一个单页应用程序。路由切换后，定时器不会自动关闭，需要手动清零。当页面被破坏时，清除计时器即可。

组件里定时器销毁问题

　　我在A页写了一个定时器，让他每秒打印一个1，然后跳转到b页，这个时候我们可以看到定时器还在运行。这非常消耗性能。

　　如下图所示：

解决方法1

　　首先，我在数据函数中定义了计时器名称：

　　data() {

　　返回{

　　计时器：空//计时器名称

　　}

　　},

　　然后像这样使用计时器：

　　This.timer=(()={//部分操作}，1000)

　　最后，清除beforeDestroy()生命周期中的计时器：

　　销毁前(){

　　clear interval(this . timer)；

　　this.timer=null

　　}

　　这个计划有两个缺点，用特别夸张的话说，就是：

　　它需要在这个组件实例中保存这个计时器。如果可能的话，最好只有生命周期钩子可以访问它。这个问题不算严重，但也算是杂物。我们的构建代码独立于干净的代码，这使得我们很难以编程方式清理我们构建的所有东西。

解决方案2

　　方法是将定时器清零$once，定时器定义后事件监听器的位置。

　　以下是完整的代码：

　　Const timer=setInterval(()={ //部分定时器操作}，500)；

　　//通过$once监听定时器，钩子可以在Destroy之前清除。

　　这个。$once(hook:beforeDestroy ，()={

　　clearInterval(定时器)；

　　})

　　类似于当前页面需要使用的其他组件，以及离开后需要销毁的组件(比如一些第三方库的picker组件等。)，可以用这个方法解决走后跑在后面的问题。

　　总的来说，我们推荐方案2，让代码可读性更强，一目了然。如果你不知道$once，$on和$off的用法，这里有官网的地址教程，在编程事件监听器那里。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。