vue中的内置组件：keep-alive

基本功能

<keep-alive> 的核心作用是：

1. 缓存动态组件：动态组件在切换时不会被卸载，而是会被保留在内存中。
2. 保留组件状态：被缓存的组件会保留其数据状态以及 DOM 状态。
3. 优化性能：减少重复的组件初始化、渲染和销毁操作。

---

常见使用场景

• 动态组件切换：当使用 <component :is="componentName"> 来动态加载组件时，配合 <keep-alive> 可以缓存这些动态组件。
• 路由缓存：结合 Vue Router 使用，可以在切换路由时缓存某些页面组件，避免重新加载和初始化。

---

基本语法

<keep-alive>
  <component :is="componentName" />
</keep-alive>

示例代码：

<template>
  <div>
    <button @click="currentView = 'viewA'">显示 ViewA</button>
    <button @click="currentView = 'viewB'">显示 ViewB</button>
    <keep-alive>
      <component :is="currentView" />
    </keep-alive>
  </div>
</template>

<script>
import ViewA from './ViewA.vue'
import ViewB from './ViewB.vue'

export default {
  data() {
    return {
      currentView: 'viewA',
    }
  },
  components: {
    viewA: ViewA,
    viewB: ViewB,
  },
}
</script>

在这个示例中，切换组件时，ViewA 或 ViewB 不会被销毁，而是被缓存。

---

结合路由使用

在 Vue Router 中，可以通过 meta 和 <keep-alive> 结合实现路由组件的缓存。

路由配置示例：

const routes = [
  {
    path: '/home',
    component: () => import('./Home.vue'),
    meta: { keepAlive: true },
  },
  {
    path: '/about',
    component: () => import('./About.vue'),
  },
];

App.vue 示例：

<template>
  <div id="app">
    <router-view v-slot="{ Component, route }">
      <keep-alive include="Home">
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

在这里，Home 组件会被缓存，而 About 切换时会被销毁。

---

高级特性

1. include 和 exclude

<keep-alive> 提供了两个属性 include 和 exclude，用于指定需要缓存或排除缓存的组件。

• include：缓存匹配的组件，支持字符串或正则表达式。
• exclude：排除缓存的组件，支持字符串或正则表达式。

示例：

<keep-alive include="ViewA,ViewB" exclude="ViewC">
  <component :is="componentName" />
</keep-alive>

2. max

max 属性用于限制缓存组件的数量，超过数量时，最早的缓存实例会被销毁。

示例：

<keep-alive :max="2">
  <component :is="componentName" />
</keep-alive>

---

生命周期钩子

当组件被 <keep-alive> 包裹时，会多出两个特定的生命周期钩子：

1. activated：组件从缓存中被激活时触发。
2. deactivated：组件被缓存而移出 DOM 时触发。

示例：

export default {
  activated() {
    console.log('组件被激活');
  },
  deactivated() {
    console.log('组件被移出 DOM');
  },
};

---

注意事项

1. 仅支持状态组件：<keep-alive> 只能用于普通的状态组件，不能用于函数式组件。
2. 避免过多缓存：缓存的组件会保存在内存中，过多组件可能会导致内存占用过高。
3. 动态组件名称需正确：使用 include 和 exclude 时，组件名称必须与其 name 属性匹配。

---

<keep-alive> 是 Vue 中一个非常强大的性能优化工具，合理使用可以有效提升用户体验，特别是在需要频繁切换的场景中。