Vue keep-alive 缓存组件

Question

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到 keep-alive 组件。

使用 keep-alive 后组件的 生命周期的变化如下：

1. 初次进入时：先 onMounted , 再 onActivated
2. 退出后触发 onDeactivated
3. 再次进入：只会触发 onActivated

因此，事件挂载的方法等 和 只执行一次的放在 onMounted 中；组件每次进去执行的方法放在 onActivated 中

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
 
<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
 
<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

include 、 exclude 和 max

• include : 设置 keep-alive缓存哪些组件，可以用逗号分隔字符串、正则表达式或一个数组来表示
• exclude : 设置 keep-alive不缓存哪些组件，可以用逗号分隔字符串、正则表达式或一个数组来表示
• max : 设置 keep-alive 缓存组件的数量

<keep-alive :include="['A']" :exclude="" :max="5">
	<A></A>
  <B></B>
</keep-alive>

# 组件 A.vue
<script>
export default {
  name: 'A'
}
</script>

# 组件 B.vue
<script>
export default {
  name: 'B'
}
</script>