vue3 内置组件KeepAlive的使用

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

基本使用

keepAlive 通常用于包裹动态组件，以实现缓存功能。其基本语法如下：

// 父组件CompKeepAlive.vue 
<script setup>
import { shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'const current = shallowRef(CompA)
</script><template><div class="demo"><label><input type="radio" v-model="current" :value="CompA" /> A</label><label><input type="radio" v-model="current" :value="CompB" /> B</label><KeepAlive><component :is="current"></component></KeepAlive></div>
</template>// 子组件 CompA.vue
<script setup>
import { ref } from 'vue'const count = ref(0)
</script><template><p>Current component: A</p><span>count: {{ count }}</span><button @click="count++">+</button>
</template>// 子组件 CompB.vue
<script setup>
import { ref } from 'vue'
const msg = ref('')
</script><template><p>Current component: B</p><span>Message is: {{ msg }}</span><input v-model="msg">
</template>

包裹了动态组件 。当 current 的值切换时，被缓存的组件不会被销毁，而是被保留在内存中，以便下次切换时快速渲染

包含/排除

keepAlive 提供了 include 和 exclude 属性，用于控制哪些组件需要被缓存，哪些组件需要被排除。

• include：指定需要被缓存的组件名称。可以是一个字符串或正则表达式。
• exclude：指定不需要被缓存的组件名称。可以是一个字符串或正则表达式

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b"><component :is="current" />
</KeepAlive><!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/"><component :is="current" />
</KeepAlive><!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']"><component :is="current" />
</KeepAlive>

exclude组件

<keep-alive :exclude="['CompB']"><component :is="current"></component>
</keep-alive>

最大缓存实例数

keepAlive 提供了一个 max 属性，用于限制缓存实例的最大数量。当缓存实例数量超过 max 时，最早缓存的实例会被移除

<KeepAlive :max="1"><component :is="current" />
</KeepAlive>// CompA.vue 会被缓存

缓存实例的生命周期

对于缓存的组件来说，再次进入时，我们是不会执行created或者mounted等生命周期函数的：

• 但是有时候我们确实希望监听到何时重新进入到了组件，何时离开了组件；
• 这个时候我们可以使用activated 和 deactivated 这两个生命周期钩子函数来监听；

<script setup>
import { ref ,onActivated,onDeactivated } from 'vue'
onActivated(()=>{console.log('onActivated-- compA')})
onDeactivated(()=>{console.log('onDeactivated --compA')
})
const count = ref(0)
</script><template><p>Current component: A</p><span>count: {{ count }}</span><button @click="count++">+</button>
</template>

请注意:

• onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。

• 这两个钩子不仅适用于 缓存的根组件，也适用于缓存树中的后代组件。

路由组件缓存​​：需配合 vue-router 的 使用

<template>
<keep-alive :include="cachedComponents" :max="3"><router-view></router-view>
</keep-alive>
</template><script>
export default {
data() {return {cachedComponents: ['Home', 'Profile'] // 需要缓存的组件名};
}
};
</script>