web学习笔记（六十三）

目录

1.钩子函数onActivated和onDeactivated

1.1 onActivated

1.2 onDeactivated

2. KeepAlive补充

2.1 include 和 exclude

2.2 的作用是什么?

 2.3 组件包含什么prop属性及作用？

2.4 对应那两个生命周期？生命周期什么时机执行？

2.5 当缓存组件过多时如何将不需要的组件取消缓存。

3. transition动画组件

4.   transition组件使用animate.css动画库

---

1.钩子函数onActivated和onDeactivated

这两个函数需要搭配keepalive来使用，不能单独使用。

1.1 onActivated

调用时期为首次挂载时，以及每次从缓存中被重新插入时。

1.2 onDeactivated

调用时期为从dom上移除、进入缓存，以及组件卸载时。

2. KeepAlive补充

2.1 include 和 exclude

<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。但如果我们使用了setup语法糖，此时就不需要再声明name了，因为使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。

2.2 <keepalive></keepalive>的作用是什么?