两个新的生命周期钩子（路由专属）

  • 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

  • 具体名字：

    1. activated路由组件被激活(获取该路由组件焦点)时触发。
    2. deactivated路由组件失活(失去该路由组件焦点)时触发。

使用场景

  • 在渲染路由组件时 我们可能会为了保留组件内填写的数据 通过<keep-alive include="Home">标签缓存路由组件使组件不被销毁，从而监测不到组件内的beforeDestroy()销毁组件之前的钩子来进行销毁前的工作比如清除定时器等等…
  • 这个时候我们就可以通过deactivated()方法来替代beforeDestroy()来进行最后的收尾工作

代码展示:

要求:实现”Hello Vue标题的渐变”

  • News组件
<template>
    <ul>
        <li :style="{opacity}">Hello Vue!!!</li>
        <!-- 给这些新闻后面加入输入框 -->
        <li>news001</li><input type="text">
        <li>news002</li><input type="text">
        <li>news003</li><input type="text">
    </ul>
</template>

<script>
    export default {
        name : 'News',
        data() {
            return {
                // 设置透明度初识值
                opacity: 1  
            }
        },

        // 引出两个生命周期钩子(路由专属)
        // 1.activated钩子是该路由在激活(显示该路由组件)时执行
        activated(){
            console.log('news组件被激活了!');
            // 这里我们可以设置透明度的衰减来实现标题的变换
            this.timer = setInterval(()=>{
                // 用于判断定时器是否挂载和清除
                console.log('@');
                this.opacity-=0.01
                // 设置判断逻辑
                if(this.opacity<=0){
                    this.opacity = 1
                }
            },10)
        },

        // 2.deactivated钩子是在路由组件失活(离开该路由组件)时触发
        deactivated(){
            console.log('news组件失活了!');
            // 清除计时器
            clearInterval(this.timer)
        }
    }
</script>

结果展示:

image