Vue Router系列之(十一)两个新的生命周期钩子
两个新的生命周期钩子
缓存路由组件和定时器一起使用时,如果进行了路由跳转,本应触发在beforeDestroy钩子中清除定时器方法,但因为缓存了路由组件,就导致原来的路由组件的beforeDestroy钩子不会被触发,定时器也就不会清除
-
作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。
-
具体名字:
-
activated
路由组件被激活时触发。激活是指通过路由跳转的方式切到当前组件时,被调用的时机比mounted晚
-
deactivated
路由组件失活时触发。失活是指通过路由跳转的方式从当前组件切走时,被调用的时机比beforeDestroy早
-
// activated中开启定时器
activated() {
this.interId = setInterval(() => {
console.log('@')
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
// deactivated中关闭定时器
deactivated() {
clearInterval(this.interId)
}
分类:
Vue / Vue Router
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!