Vue-router的两个新的生命周期钩子

作用：

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

具体名字：

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

   2. deactivated 路由组件失活时触发。

代码演示

        在组件中我们添加了这两个生命周期钩子 在组件激活（显示该组件）和失活（离开该组件）时触发对应的生命周期函数

<template>
  <div>
      这是Home组件
  </div>
</template>

<script>
export default {
    name: 'Home',
    activated() {
        console.log('home组件被激活了');
    },
    deactivated() {
        console.log('home组件被失活了');
    }
}
</script>

使用场景
        在渲染路由组件时 我们可能会为了保留组件内填写的数据 通过<keep-alive include="Home">标签缓存路由组件使组件不被销毁，从而监测不到组件内的beforeDestroy()销毁组件之前的钩子来进行销毁前的工作比如清除定时器等等... 

        这个时候我们就可以通过deactivated()方法来替代beforeDestroy()来进行最后的收尾工作

<template>
  <div>
    这是Home组件
    <h2 :style="{ opacity }">你好</h2>
  </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            opacity: 1
        }
    },
    // // 此时由于给当前组件设置了路由组件缓存，组件间不会销毁，所以无法触发beforeDestroy()方法
    // beforeDestroy() {
    //     // 销毁之前的生命周期函数
    //     console.log('home组件将要销毁了');
    //     clearInterval(this.timer)
    // },
    activated() {
        console.log('home组件被激活了');
        this.timer = setInterval(() => {
            console.log('setInterval')
            this.opacity -= 0.01
            if(this.opacity <= 0) this.opacity = 1
        },16)
    },
    deactivated() {
        console.log('home组件失活了');
        clearInterval(this.timer)
    }
}
</script>