Vue 核心知识：内置组件Keeplive

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[[e-mail]]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

---

目录

• 让我们一起走向未来

• 1. **基本使用**

• 示例：

• 2. **包含和排除**

• 示例：包含和排除特定组件

• 3. **最大缓存实例数**

• 示例：设置最大缓存实例数

• 4. **缓存实例的生命周期**

• 示例：缓存组件的生命周期钩子

• 5. **总结**
• 常见属性：

<KeepAlive> 是 Vue 提供的一个内置组件，用于缓存动态组件。当一个组件被包裹在 <KeepAlive> 内部时，Vue 会缓存组件的状态和 DOM，而不是在每次组件切换时销毁并重新创建它。这对于需要频繁切换的页面或者组件，尤其是那些包含复杂状态或动画的组件，可以大大提高性能。

1. 基本使用

<KeepAlive> 用于包裹动态组件，并保持这些组件的状态和 DOM。它通常与 v-if 或 v-show 配合使用，动态地切换组件，而不会销毁已经渲染的组件。

示例：

<template>
  <button @click="toggleComponent">Toggle Component</button>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

<script setup>
import { ref } from 'vue'

const currentComponent = ref('ComponentA')

const toggleComponent = () => {
  currentComponent.value = currentComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
</script>

<template>
  <div>Component A</div>
</template>

<script setup>
  // ComponentA 的代码
</script>

<template>
  <div>Component B</div>
</template>

<script setup>
  // ComponentB 的代码
</script>

在上面的示例中，<keep-alive> 包裹了动态组件 <component>，在切换组件时，它会缓存每个组件的状态，而不是销毁组件。

2. 包含和排除

<KeepAlive> 提供了 include 和 exclude 属性，用于控制哪些组件需要被缓存。include 和 exclude 都可以是字符串、正则表达式或数组。

• include：只有与给定名称匹配的组件才会被缓存。
• exclude：与给定名称匹配的组件将不会被缓存。

示例：包含和排除特定组件

<template>
  <button @click="toggleComponent">Toggle Component</button>
  <keep-alive :include="['ComponentA']">
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

<script setup>
import { ref } from 'vue'

const currentComponent = ref('ComponentA')

const toggleComponent = () => {
  currentComponent.value = currentComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
</script>

<template>
  <div>Component A</div>
</template>

<script setup>
  // ComponentA 的代码
</script>

<template>
  <div>Component B</div>
</template>

<script setup>
  // ComponentB 的代码
</script>

在这个例子中，<keep-alive :include="['ComponentA']"> 仅缓存 ComponentA，而 ComponentB 不会被缓存，切换到 ComponentB 时，它会被销毁并重新创建。

3. 最大缓存实例数

Vue 2.5+ 引入了 max 属性，用于限制缓存的最大实例数。超过这个数量时，最旧的缓存组件将会被销毁。

示例：设置最大缓存实例数

<template>
  <button @click="toggleComponent">Toggle Component</button>
  <keep-alive :max="2">
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

<script setup>
import { ref } from 'vue'

const currentComponent = ref('ComponentA')

const toggleComponent = () => {
  currentComponent.value = currentComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
</script>

<template>
  <div>Component A</div>
</template>

<script setup>
  // ComponentA 的代码
</script>

<template>
  <div>Component B</div>
</template>

<script setup>
  // ComponentB 的代码
</script>

在这个例子中，<keep-alive :max="2"> 限制了最多缓存两个组件实例。当超过两个缓存实例时，最旧的实例将被销毁。

4. 缓存实例的生命周期

<KeepAlive> 内部缓存的组件实例会经历与普通组件相同的生命周期钩子，但有一些特定的钩子可以帮助你管理缓存的生命周期：

• activated：当缓存的组件被重新激活时触发。例如，当该组件重新显示时，它会触发 activated 钩子。
• deactivated：当缓存的组件被停用时触发。例如，当该组件被隐藏时，它会触发 deactivated 钩子。

示例：缓存组件的生命周期钩子

<template>
  <button @click="toggleComponent">Toggle Component</button>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

<script setup>
import { ref, onActivated, onDeactivated } from 'vue'

const currentComponent = ref('ComponentA')

const toggleComponent = () => {
  currentComponent.value = currentComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}

onActivated(() => {
  console.log('Component activated')
})

onDeactivated(() => {
  console.log('Component deactivated')
})
</script>

<template>
  <div>Component A</div>
</template>

<script setup>
  // ComponentA 的代码
</script>

<template>
  <div>Component B</div>
</template>

<script setup>
  // ComponentB 的代码
</script>

在上面的代码中，当组件从缓存中恢复时，会触发 onActivated 钩子；当组件被从视图中移除并缓存时，会触发 onDeactivated 钩子。

5. 总结

<KeepAlive> 是一个强大的工具，它通过缓存组件的状态和 DOM 来提高性能。它的主要功能和用法如下：

• 基本使用：将动态组件包裹在 <keep-alive> 中，使其状态被缓存。
• 包含和排除：通过 include 和 exclude 属性来控制哪些组件需要缓存。
• 最大缓存实例数：通过 max 属性限制最大缓存实例数，超过时最旧的实例将被销毁。
• 缓存实例的生命周期：通过 activated 和 deactivated 生命周期钩子，管理缓存组件的生命周期。

常见属性：

属性	描述
include	控制哪些组件需要被缓存，可以是字符串、正则表达式或数组。
exclude	控制哪些组件不需要被缓存，可以是字符串、正则表达式或数组。
max	限制缓存的最大实例数，超过时最旧的实例会被销毁。

<KeepAlive> 是提高性能和优化动态页面的非常有用的功能，尤其是在多次切换组件的应用场景中。