vue3学习（九）--- keep-alive缓存组件

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

keep-alive有两个独有的生命周期：activated、 deactivated

接下来看一下keep-alive的执行顺序：

1. 首次进入页面触发：onMounted、onActivated
2. 退出或切换组件触发：onDeactivated，不会触发onUnmounted
3. 再次进入触发：只会触发 onActivated
4. 事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中

注意：keep-alive里面只允许存放一个组件

<!-- 基本 -->
<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>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

include、exclude和max

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

include(包含) 和 exclude(不包含) 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

max表示最多缓存的个数，超过这个限制会将之前失活的组件替换为最新的组件缓存起来。