keep-alive缓存组件
新建两个表单组件,Form1.vue
和Form2.vue
,利用v-if控制切换,测试缓存效果
include
和exclude
一个以英文逗号分隔的字符串、一个正则表达式,或是包含这两种类型的一个数组include
和exclude
根据组件的 name 选项进行匹配;- 可以通过传入
max
prop 来限制可被缓存的最大组件实例数;如果缓存的实例数量即将超过指定的那个最大数量,则最久没有被访问的缓存实例将被销毁,以便为新的实例腾出空间
<keep-alive :include="['Form1','Form2']" :exclude="['Form1']">
<Form1 v-if="!flag"></Form1>
<Form2 v-else></Form2>
</keep-alive>
//测试过程中发现了include失效的问题,在Form1.vue组件中加上下面内容解决
<script lang="ts">
export default {
name:"Form1"
}
keep-alive的生命周期
activated() {
// 在首次挂载、
// 以及每次从缓存中被重新插入的时候调用
},
deactivated() {
// 在从 DOM 上移除、进入缓存
// 以及组件卸载时调用
}
- activated 在组件挂载时也会调用,并且 deactivated 在组件卸载时也会调用。
- 这两个钩子不仅适用于 缓存的根组件,也适用于缓存树中的后代组件。