keep-alive的生命周期

需求：在 keep-alive 的组件被激活时，需要重新获取某个数据

keep-alive 的生命周期执行

页面第一次进入，钩子的触发顺序
created-> mounted-> activated，
退出时触发 deactivated
当再次进入（前进或者后退）时，只触发 activated
事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中。

基本用法

<!-- 被keepalive包含的组件会被缓存 -->
<keep-alive>
  <component></component>
</keep-alive>

被 keepalive 包含的组件不会被再次初始化，也就意味着不会重走生命周期函数;
但是有时候是希望我们缓存的组件可以能够再次进行渲染，这时 Vue 为我们解决了这个问题;
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated。

• activated
  当 keepalive 包含的组件再次渲染的时候触发
• deactivated
  当 keepalive 包含的组件销毁的时候触发

keepalive 是一个抽象的组件，缓存的组件不会被 mounted,为此提供 activated 和 deactivated 钩子函数

Tips

1. 在 vue2.0 的写法可以这样：

<keep-alive>
  <acom v-if="comval === 'a'"></acom>
  <bcom v-if="comval === 'b'"></bcom>
</keep-alive>

2. 在 vue3.0 上面的写法会报错

VueCompilerError: <KeepAlive> expects exactly one child component.

只能写成：

<keep-alive>
  <component :is="comval"></component>
</keep-alive>