128_两个新的生命周期钩子

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

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

示例代码：
News.vue：

<template>
  <ul>
    <li :style="{opacity}">欢迎学习Vue</li>
    <li>news001 <input type="text"></li>
    <li>news002 <input type="text"></li>
    <li>news003 <input type="text"></li>
  </ul>
</template>

<script>
  export default {
    name: 'News',
    data() {
      return {
        opacity: 1
      }
    },
    /*
    我们现在想要达到的目的就是:
    在切换路由时, 本News路由被缓存, 不会被销毁, 但需要将定时器停住.
    用以前的方法是切换后定时器依然在运行(因为没有被销毁嘛),
    这时候需要用新的生命周期钩子来完成功能.
    */

    /* beforeDestroy() {
      console.log('News组件即将被销毁了')
      clearInterval(this.timer)
    },
    mounted() {
      this.timer = setInterval(() => {
        console.log('@')
        this.opacity -= 0.01
        if (this.opacity <= 0) this.opacity = 1
      }, 16)
    }, */

	/* 用新的生命周期钩子来完成功能. */
    activated() {
      console.log('News组件被激活了')
      this.timer = setInterval(() => {
        console.log('@')
        this.opacity -= 0.01
        if (this.opacity <= 0) this.opacity = 1
      }, 16)
    },
    deactivated() {
      console.log('News组件失活了')
      clearInterval(this.timer)
    }
  }
</script>