vue——路由独有的生命周期函数 activated deactivated

activated：路由组件被激活时触发
deactivated：路由组件失活时触发
当使用了 <keep-alive> </keep-alive>之后跳转到其他组件时，之前的组件不会被销毁这时配置在beforeDestroy()中的方法就不会生效可能会产生资源浪费达不到想要的效果
例如

mounted(){this.timmer = setInterval(()=>{console.log('hello word')})
},
beforeDestroy(){console.log("要销毁了")clearInterval(this,timer)
},

若这个组件被 <keep-alive> </keep-alive>包裹则跳走时并不会触发 beforeDestroy ，定时就不会被关闭

activated(){this.timmer = setInterval(()=>{console.log('激活啦')})
},
deactivated(){console.log("要失活了")clearInterval(this,timer)
},

这样就可关闭定时器了

vue——路由独有的生命周期函数 activated deactivated相关推荐

五十七、Vue中的八大生命周期函数
@Author:Runsen @Date:2020/10/15 什么是vue生命周期 Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载DOM-渲染.更新-渲染 ...
Vue 页面如何利用生命周期函数监听用户预览时长
最近的业务中涉及到这样一个需求,在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长.初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed,分别在其中加 ...
Vue组件嵌套时生命周期函数触发顺序是什么？
使用过Vue的大家,对于生命周期一定都很熟悉,在官方文档一开始,就给我们介绍了Vue的生命周期有哪些,是怎么样的顺序.这个难不倒大家. 但如果是问当组件嵌套时,父子组件的生命周期函数触发的顺序是什么样 ...
Vue.js中的生命周期函数
1. 组件创建阶段: beforeCreate(),这是我们遇到的第一个生命周期函数.表示实例被完全创建出来之前,会执行这个生命周期函数. created(),这是遇到的第二个生命周期函数. befo ...
Vue的几个生命周期函数
什么是生命周期和生命周期函数生命周期是指一个组件从创建->运行->销毁的整个阶段,强调的是时间段. 生命周期函数是由Vue框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 注 ...
细说vue钩子函数（生命周期函数）
一.概述钩子函数用来描述一个组件从引入到退出的全过程中的某个过程,整个过程称为生命周期. 钩子函数按照组件生命周期的过程分为:挂载阶段=>更新阶段=>销毁阶段. 二.每个阶段对应的钩子函 ...
vue2的生命周期函数
引入使用一个vue-li搭建的项目,想在页面渲染前从后端拿数据,对挂载的dom进行操作,将初始化的数据改为后端数据. 这样就涉及到生命周期函数的应用了,我们来看看官方给的钩子函数生命周期函数共有1 ...
什么是生命周期函数(钩子函数)
vue 框架内置函数,随着组件的生命周期,自动按次序执行作用: 特定的时间点,执行某些特定的操作场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data ...
Vue生命周期函数解析及各个组件间调用顺序
Vue生命周期函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed befo ...

vue——路由独有的生命周期函数 activated deactivated

vue——路由独有的生命周期函数 activated deactivated相关推荐

最新文章

热门文章