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>
Vue中在组件销毁时清除定时器(setInterval)的更多相关文章
- Vue中keep-alive组件的理解
对keep-alive组件的理解 当在组件之间切换的时候,有时会想保持这些组件的状态,以避免反复重渲染导致的性能等问题,使用<keep-alive>包裹动态组件时,会缓存不活动的组件实例, ...
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- Vue 中的组件
VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...
- 简述vue中父子组件是怎样相互传递值的(基础向)
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue 中数据流组件
好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...
- 解决vue中element组件样式修改无效
vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...
随机推荐
- 对String对象进行JSON序列化
对对象进行JSON序列化,会得到类似key:value的形式. 但是如果对一个String字符串进行JSON序列化会得到什么? 测试下: public class TestMain2 { pu ...
- js18位身份证验证(非原创)
原文链接 function check_id(value) { var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];/ ...
- [CF1051F]The Shortest Statement_堆优化dij_最短路树_倍增lca
The Shortest Statement 题目链接:https://codeforces.com/contest/1051/problem/F 数据范围:略. 题解: 关于这个题,有一个重要的性质 ...
- QT 设置程序图标
1.应用窗口左上角的图标.状态栏上显示的图标用setWindowIcon()函数: 2.可执行程序的图标设置: (1).右键项目添加一个资源文件 (2).导入.ico文件图标
- python 之 网络编程(基于UDP协议的套接字通信)
8.5 基于UDP协议的套接字通信 UDP协议:数据报协议 特点:无连接,一发对应一收,先启动哪一端都不会报错 优点:发送效率高,但有效传输的数据量最多为500bytes 缺点:不可靠:发送数据,无需 ...
- 小贴士--java篇
1. java: “.”和“|”都是转义字符,必须得加"\\" 2.java :如果在一个字符串中有多个分隔符,可以用“|”作为连字符,比如:“acount=? and uu = ...
- Mybatis整合(Redis、Ehcache)实现二级缓存
目的: Mybatis整合Ehcache实现二级缓存 Mybatis整合Redis实现二级缓存 Mybatis整合ehcache实现二级缓存 ssm中整合ehcache 在POM中导入相关依赖 < ...
- 使用其他身份运行计算机(DOS命令)
runas/user:administrator cmd d: cd esop sfispri.ini
- Spark机器学习基础-无监督学习
0.K-means from __future__ import print_function from pyspark.ml.clustering import KMeans#硬聚类 #from p ...
- Bigdecimal除法异常
1.异常信息摘要(详细请见文末): java.lang.ArithmeticException: Non-terminating decimal expansion; no exact represe ...