Vue内置组件KeepAlive

封面图 • 2025-11-21 • Vue

在 Vue 中，`<keep-alive>` 是一个**内置组件**，用于缓存动态组件（如 `<component :is="..." />`）或路由组件（在 Vue Router 中），以避免重复渲染和销毁组件实例，从而提升性能。

---

## ✅ 一、基本用法

```vue
<template>
  <div>
    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
  </div>
</template>

在这个例子中，当 `currentComponent` 切换时，`<keep-alive>` 会保留之前渲染的组件状态（如数据、滚动位置等）。

---

## ✅ 二、支持的属性

### 1. `include`
指定哪些组件需要被缓存。可以使用组件名字符串、正则表达式或数组：

```vue
<keep-alive include="Home,About">
  <component :is="currentComponent" />
</keep-alive>
```

### 2. `exclude`
指定哪些组件**不要**被缓存：

```vue
<keep-alive exclude="User">
  <component :is="currentComponent" />
</keep-alive>
```

### 3. `max`
限制缓存组件的数量，超出后按 LRU（最近最少使用）算法移除：

```vue
<keep-alive :max="5">
  <component :is="currentComponent" />
</keep-alive>
```

---

## ✅ 三、生命周期钩子

`<keep-alive>` 会触发以下两个特殊的生命周期钩子：

| 钩子 | 说明 |
|------|------|
| `activated` | 当组件被激活（从缓存中恢复）时调用 |
| `deactivated` | 当组件被缓存（离开当前视图）时调用 |

示例：

```vue
<script>
export default {
  activated() {
    console.log('组件被激活');
  },
  deactivated() {
    console.log('组件被缓存');
  }
};
</script>
```

---

## ✅ 四、应用场景

- **Tab 切换页面**：比如设置页、用户信息页等，切换时保留数据。
- **表单提交**：避免每次切换页面都重置表单内容。
- **动态组件切换**：比如根据用户选择加载不同的组件，但希望保留状态。

---

## ✅ 五、注意事项

- `keep-alive` 只能作用于动态组件（`<component :is="..." />`）或通过 Vue Router 的异步组件。
- 不适用于静态组件（直接写 `<Home />`）。
- 使用 `v-if` 控制是否渲染时，可能会影响缓存行为。

---

## ✅ 六、Vue 3 中的变化

在 Vue 3 中，`<keep-alive>` 的行为与 Vue 2 基本一致，但更推荐使用组合式 API 和 `useKeepAlive`（如果需要自定义逻辑）。

---

如果你有具体的使用场景或问题，我可以进一步帮你分析！