十、两个新生命周期钩子 activated/deactivated
1、需求
每次切入到 News 组件其内容就闪烁
2、CODE
1、News.vue
<template><ul :style="{opacity}"><li>大新闻 <input type='text'/></li><li>特大新闻 <input type='text'/></li><li>炒鸡大新闻 <input type='text'/></li></ul></template><script>export default {name:'News',data(){return {opacity: 1,timer: null}},mounted(){this.timer = setInterval(()=>{console.log('变化进行中~')this.opacity -= 0.1if(this.opacity <= 0) this.opacity = 1}, 100)},beforeDestroy() {clearInterval(this.timer)}}</script>
2、Result
闪烁没问题，但是切换到其他组件它依然在闪烁（别忘了上一节 News 已经 keep-alive 了！）
3、两个路由新钩子登场！
作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态具体名字：activated 路由组件被激活时触发deactivated 路由组件失活时触发4、解决第2条遇到的问题
<script>export default {name:'News',data(){return {opacity: 1,timer: null}},activated(){this.timer = setInterval(()=>{console.log('变化进行中~')this.opacity -= 0.1if(this.opacity <= 0) this.opacity = 1}, 100)},deactivated(){clearInterval(this.timer)}}</script>
如果觉得《十 【Vue-Router】两个新生命周期钩子 activated/deactivated》对你有帮助，请点赞、收藏，并留下你的观点哦！
