Vue中在组件销毁时清除定时器(setInterval)

在mounted中创建并执行定时器,然后在beforeDestroy或者destroyed中清除定时器

<template>
      <div class="about">
      </div>
    </template>
    <script>
    export default {
        name: "about",
        data() {
            return {
                //接收定时器
                timer: ""
            };
        },
        mounted() {
            let _this = this;
            let num = 0;
            //创建并执行定时器
            this.timer = setInterval(() => {
              //当num等于100时清除定时器
                if (num == 100) {
                    clearInterval(_this.timer);
                }
                console.log(num++);
            }, 1000);
        },
        beforeDestroy() {
            //清除定时器
            clearInterval(this.timer);
            console.log("beforeDestroy");
        },
        destroyed() {
            //清除定时器
            //clearInterval(this.timer);
            console.log("destroyed");
        }
    };
    </script>
    <style scoped>
    </style>

原文地址:https://www.cnblogs.com/web-chuanfa/p/10857007.html

时间: 2024-11-09 09:37:54

Vue中在组件销毁时清除定时器(setInterval)的相关文章

vue中自定义组件(插件)

vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: 1.首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如: <template> <div> loading.............. </div

Vue 中数据流组件

好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的还是我们自己给的?其实我觉得自己选择的方向是对的,但是有时难免会怀疑,是否有人和我在做一样的事情,我希望找到有趣的伙伴,做一些有趣的事情. Vue 中数据流组件 又将年终了,该做年终总结了呀..最近花了一些时间,升级了一下我们的技术架构,使用 vue 作为我们的框架.延续传统,我们仍然需要开发一些

Vue中的组件通信

这两天在学Vue,记录一下我认为比较重要的东西 Vue中的组件通信: 我们可以分为3个步骤来: 1.声明局部子组件,简称 "声子", 2.挂载到dom树上面去,简称:"挂子" 3.进行使用,简称:"用子" 上面写的别人可能看不太明白,毕竟只是我的看法: <body> <div id="app"> </div> </body> 先写一个div,给它一个ID=app <scri

vue中父子组件传值

vue中,在子组件设置props对象,来接受父组件传来的值 父组件中,:冒号后面的绿色变量必须和子组件中props的变量保持一致 子组件: type设置值的类型 default设置默认值,当没有给子组件传值时使用default里的内容 子传父: $emit 如果是子组件想传递数据给父组件,需要派发自定义事件,使用 $emit 派发,父组件使用v-on接收监控(v-on可以简写成@) 父组件在html代码中这样接收,changeSelect是一个自己在methods中定义的方法 子组件在metho

vue中的组件

组件是Vue最强大的功能之一.组件是一组可被复用的具有一定功能,独立的完整的代码片段,这个代码片段可以渲染一个完整视图结构组件开发如何注册组件?第一步,在页面HTML标签中使用这个组件名称,像使用DOM元素一样.(通常是一个自定义元素).<div id="app"> <my-component></my-component></div>第二步,使用Vue.extend方法创建一个组件var MyComponent = Vue.extend

Unity3D中关于场景销毁时事件调用顺序的一点记录

先说一下我遇到的问题,我弄了一个对象池管理多个对象,对象池绑定在一个GameObject上,每个对象在OnBecameInvisible时会进行回收(即移出屏幕就回收),但是当场景切换或停止运行程序时场景中如果还有待回收的对象,就会报错,报错显示的信息为,我的对象池GameObject已经被销毁了云云,因为回收的对象我会把他们作为绑定了对象池的GameObject的子级来方便管理. 所以唯一的可能就是脚本方法调用顺序不可控,即不同GameObject的OnBecameInvisible在其它Ga

vue中局部组件的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{msg}} </div> <script src="vue.js">

VUE中父组件向子组件传递数据 props使用

VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent"> <ul> <li v-for="item in fatherdatas">{{item}}</li> <!--父组件可以访问它自己的数据--> </ul> <child-component></chi

vue中父组件如何监听子组件值的变化

vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组件传来的值: 3:父组件可以通过this.$refs.name.去访问子组件的值或方法: 4:子组件可以通过this.$parent.去访问父组件的值或方法: 总结了一下,感觉好像挺全面的,好像不缺啥了.... 但是仔细一想,父组件如何去监听子组件的值呢?如何根据子组件中的某个值的变化,父组件作出响