路由组件生命周期

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

• activated 路由组件被激活时触发
• deactivated 路由组件失活时被触发

1. 路由新的生命周期理解

之前使用的mounted和beforeDestoryed钩子函数在特定场景不太够用，比如在路由组件里面，如果需要在挂载和销毁之前处理的逻辑代码，遇到路由组件缓存起来的时候，mounted和beforeDestoryed就会失效不会被触发，因为缓存的路由组件不会被销毁，就需要使用activated和deactivated来处理相应的业务代码。
除此之外还有一个生命周期函数：$nextTick, 它是组件被渲染完毕后触发。

<template>
  <div>
    <h2>我是Home的内容</h2>
      <router-link to="/home/news">News</router-link>
      <router-link to="/home/message">Message</router-link>
      <h3>{{num}}</h3>
      <button @click="addNum">增加</button>
      <hr/>
<!-- include属性配置的是需要缓存的组件名   -->
      <keep-alive include="News">
        <router-view></router-view>
      </keep-alive>
  </div>
</template>

<script>
export default {
  name: "Home",
  data(){
    return {
      num: 0
    }
  },
  mounted() {
    console.log('挂载完毕')
  },
  beforeDestroy() {
    console.log('准备销毁')
  },
  activated() {
    console.log('组件被激活')
  },
  deactivated() {
    console.log('组件失活')
  },
  updated() {
    console.log('页面重新渲染')
  },
  methods:{
    addNum(){
      this.num++
    }
  }
}