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> <KeepAlive :include="/a|b/"> <component :is="current" /> </KeepAlive> <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>

  Current component: A

  count: {{ count }} <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>