vue项目中清除定时器（清除定时器不成功）

首先确认< router-view >外层是否有包裹了一层< keep-alive >

如果有包裹：

<template><div><keep-alive><router-view /></keep-alive></div>
</template>

在data中：

data () {return {timer: null // 定时器}},

在activated中设置定时器：

activated () {this.timer = setInterval(() => {//  定时器中执行的代码}, 30000)},

在deactivated中清除定时器：

deactivated () {// 页面关闭（路由跳转）时清除定时器clearInterval(this.timer)this.timer = null},

< keep-alive >作用：
< keep-alive > 可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下一次显示时，也不会重现渲染（有缓存的作用）。

被包含在 < keep-alive > 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

activated
在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

deactivated
在组件被停用时调用。
注意：只有组件被 keep-alive 包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。
如果没有包裹
在data中：

data () {return {timer: null // 定时器}},

在mounted中设置定时器：

mounted() {this.timer = setInterval(() => {//  定时器中执行的代码}, 30000)},

在beforeDestroy中清除定时器：

beforeDestroy() {// 页面关闭（路由跳转）时清除定时器clearInterval(this.timer)this.timer = null},

vue项目中清除定时器（清除定时器不成功）相关推荐

Vue项目中使用和清除定时器
一.方法1 1)在首先在vue实例的data中定义定时器的名称: export default{data(){timer:null } } 2)在方法(methods)或者页面初始化(mounted( ...
java项目中多个定时器_在java项目中如何使用Timer定时器
在java项目中如何使用Timer定时器发布时间:2020-11-16 16:36:16 来源:亿速云阅读:97 作者:Leah 在java项目中如何使用Timer定时器?很多新手对此不是很清楚, ...
antvl7绘制地图以及vue项目中使用多线程worker
vue项目中如何使用多线程worker 项目背景:写一个定时器计时,但是和另外一个计时器产生事件循环问题,导致计时不准,所以把计时器放到另外一个线程里,避免两个计时器及渲染冲突 1.安装worker- ...
vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...
在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
Vue项目中操作svg文件
Vue项目中使用svg 引入依赖 yarn add svg-sprite-loader -D [可选] yarn add svgo svgo-loader -D 依赖说明: svg-sprite-lo ...
vue项目中的小知识--快捷键-vue插件版本号--vscode插件等
vue项目中的小知识--快捷键等 0 版本号 1 代码片段的获取: 2 vscode中一些常用扩展 3 进入另一个文件夹,返回上一级 4查看Vue的版本和Vue/CLI的版本 5 --save-dev ...
vue项目中动态显示时间
vue项目中动态显示时间前言一.js源代码二.效果图 1.修改 2.html与style的修改 3.修改后效果图总结前言在vue项目中动态显示时间,并且按日期.时间.星期一列排列. 我们想 ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
vue项目中使用flv.js实时播放断流重连关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长后来项目更新采用的是EasyPlayer插件文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...

vue项目中清除定时器（清除定时器不成功）

vue项目中清除定时器（清除定时器不成功）相关推荐

最新文章

热门文章