在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. beego框架(golang)学习验证码

    beego框架(golang)学习验证码 登录页面使用验证码 路由设置 /beego_admin_template/routers/router.go get请求页面, post验证用户名密码和验证码 ...

  2. idm技术下载百度网盘

    原使用教程:https://www.haorenka.org/idm.html 使用idm下载器后实际下载速度,比原网盘客户端快很多 相关软件下载 参考上面的参考教程,这里只提供对应所需要的文件,有的 ...

  3. popup demo

    Django下实现: urls.py: from django.conf.urls import url from django.contrib import admin from app01 imp ...

  4. eNSP模拟器OSPF单区域配置

    实验拓扑图如下 下一步对终端设备与路由器的端口进行基本的ip设置 配置完成后要注意检查是否有小错误,不然会对后面的测试带来麻烦.在进行基础配置的时候一定要细心细心细心. 下一步我们就要进行OSPF的配 ...

  5. win10 linux Ubuntu 18.04更换国内源

    安装了win10的linux bash 版本为ubuntu 18.04 首先查询自己的linux版本信息 cat /etc/issue   然后对系统的镜像源文件进行备份,再修改镜像源文件/etc/a ...

  6. dotnet core use Redis to publish and subscribe

    安装Redis 同样我这边再次使用Docker, 方便快捷: # 拉取镜像 docker pull redis # 运行镜像 docker run -d -p 6379:6379 --name red ...

  7. PHP与Memcached服务器交互的分布式实现源码分析

    转自: http://blog.csdn.net/hguisu/article/details/7353595 前段时间,因为一个项目的关系,研究了php通过调用memcache和memcached ...

  8. 构建工具-Gulp 相关知识

    layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- G ...

  9. C++开发新版本vs使用旧版本vs编译的静态库动态库

    关于vs潜在的升级问题概述 (Visual C++)查看官网的介绍:潜在的升级问题概述 (Visual C++).主要问题: 1. 如果使用 /GL(全程序优化)进行编译,则生成的对象文件只能使用生成 ...

  10. 10分钟搭建一个小型网页(python django)(hello world!)

    10分钟搭建一个小型网页(python django)(hello world!) 1.安装django pip install django 安装成功后,在Scripts目录下存在django-ad ...