在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>

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

  1. Vue中keep-alive组件的理解

    对keep-alive组件的理解 当在组件之间切换的时候,有时会想保持这些组件的状态,以避免反复重渲染导致的性能等问题,使用<keep-alive>包裹动态组件时,会缓存不活动的组件实例, ...

  2. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  3. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

  4. Vue 中的组件

    VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...

  5. 简述vue中父子组件是怎样相互传递值的(基础向)

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  6. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  7. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. Vue 中数据流组件

    好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...

  9. 解决vue中element组件样式修改无效

    vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...

随机推荐

  1. 系统调用system call以及strace/dtruss

    计算机系统的各种硬件资源是有限的,在现代多任务操作系统上同时运行的多个进程都需要访问这些资源,进程是不允许直接操作这些资源的,所有对这些资源的访问都必须有操作系统控制.也就是说操作系统是使用这些资源的 ...

  2. 【GStreamer开发】GStreamer播放教程07——自定义playbin2的sink

    目标 通过手动选择音频和视频的sink,playbin2可以进一步定制.这允许使用playbin2的应用在解码后可以自行做最终的渲染和显示.本教程展示了: 如何替换playbin2选择的sink 如何 ...

  3. stochastic noise and deterministic noise

    在机器学习中,导致overfitting的原因之一是noise,这个noise可以分为两种,即stochastic noise,随机噪声来自数据产生过程,比如测量误差等,和deterministic ...

  4. 微信小程序,内容组件中兼容的H5组件

    受信任的HTML节点及属性 全局支持class和style属性,不支持id属性. 节点 属性 a   abbr   address   article   aside   b   bdi   bdo ...

  5. Caused by: java.lang.NullPointerException: Location is required

    将 Parent root = FXMLLoader.load(getClass().getResource("xml/MainUI.fxml")); 改为: Parent roo ...

  6. php实现文件与16进制相互转换

    php实现文件与16进制相互转换 <pre><?php/** * php 文件与16进制相互转换 * Date: 2017-01-14 * Author: fdipzone * Ve ...

  7. HTTP权威指南-报文与状态码

    所有的报文都向下流动 报文流向 报文组成 HTTP方法 状态码 GET示例 HEAD示例 100~199 信息性状态码 200~299 成功状态码 300~399重定向状态码 400~499 客户端错 ...

  8. Ubuntu下U盘文件只读的解决办法

    转自linux公社:http://www.linuxidc.com/Linux/2012-12/76130.htm Ubuntu下U盘出现文件系统只读的问题了.症状为无法删除U盘中现有文件,无法向U盘 ...

  9. 第五章 模块之random 、hashlib、time /datetime

    5.2 random 返回随机生成的一个实数 random.randint() 返回随机生成的一个实数 import random #调用模块​def get_random_code(length=6 ...

  10. X64驱动:内核操作进线程/模块

    注意:下面的所有案例必须使用.C结尾的文件,且必须在链接选项中加入 /INTEGRITYCHECK 选项,否则编译根本无法通过(整合修正,Win10可编译,须在测试模式下进行),内核代码相对固定,如果 ...