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 ...
随机推荐
- beego框架(golang)学习验证码
beego框架(golang)学习验证码 登录页面使用验证码 路由设置 /beego_admin_template/routers/router.go get请求页面, post验证用户名密码和验证码 ...
- idm技术下载百度网盘
原使用教程:https://www.haorenka.org/idm.html 使用idm下载器后实际下载速度,比原网盘客户端快很多 相关软件下载 参考上面的参考教程,这里只提供对应所需要的文件,有的 ...
- popup demo
Django下实现: urls.py: from django.conf.urls import url from django.contrib import admin from app01 imp ...
- eNSP模拟器OSPF单区域配置
实验拓扑图如下 下一步对终端设备与路由器的端口进行基本的ip设置 配置完成后要注意检查是否有小错误,不然会对后面的测试带来麻烦.在进行基础配置的时候一定要细心细心细心. 下一步我们就要进行OSPF的配 ...
- win10 linux Ubuntu 18.04更换国内源
安装了win10的linux bash 版本为ubuntu 18.04 首先查询自己的linux版本信息 cat /etc/issue 然后对系统的镜像源文件进行备份,再修改镜像源文件/etc/a ...
- dotnet core use Redis to publish and subscribe
安装Redis 同样我这边再次使用Docker, 方便快捷: # 拉取镜像 docker pull redis # 运行镜像 docker run -d -p 6379:6379 --name red ...
- PHP与Memcached服务器交互的分布式实现源码分析
转自: http://blog.csdn.net/hguisu/article/details/7353595 前段时间,因为一个项目的关系,研究了php通过调用memcache和memcached ...
- 构建工具-Gulp 相关知识
layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- G ...
- C++开发新版本vs使用旧版本vs编译的静态库动态库
关于vs潜在的升级问题概述 (Visual C++)查看官网的介绍:潜在的升级问题概述 (Visual C++).主要问题: 1. 如果使用 /GL(全程序优化)进行编译,则生成的对象文件只能使用生成 ...
- 10分钟搭建一个小型网页(python django)(hello world!)
10分钟搭建一个小型网页(python django)(hello world!) 1.安装django pip install django 安装成功后,在Scripts目录下存在django-ad ...