Vue Router系列之(十一)两个新的生命周期钩子

两个新的生命周期钩子

​ 缓存路由组件和定时器一起使用时,如果进行了路由跳转,本应触发在beforeDestroy钩子中清除定时器方法,但因为缓存了路由组件,就导致原来的路由组件的beforeDestroy钩子不会被触发,定时器也就不会清除

  1. 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。

  2. 具体名字:

    1. activated路由组件被激活时触发。

      激活是指通过路由跳转的方式切到当前组件时,被调用的时机比mounted晚

    2. 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)
}
posted @ 2024-02-29 19:57  刘二水  阅读(48)  评论(0)    收藏  举报