Vue的keep-alive组件是如何缓存组件的？-Vue.js-PHP中文网

Vue的keep-alive组件是如何缓存组件的？

裘德小鎮的故事

发布： 2025-08-21 08:04:01

原创

248人浏览过

vue 的 keep-alive 组件是一个抽象组件，不会渲染为真实 dom，主要用于缓存动态切换的组件以提升性能。1. 它通过保存组件实例到内存中而非销毁，实现组件切换时的状态保留，并在激活和失活时分别触发 activated 和 deactivated 生命周期钩子；2. 可通过 include 和 exclude 属性控制缓存策略，仅缓存指定组件或排除特定组件，但需确保组件设置了 name 属性；3. 使用 keep-alive 可能带来状态不重置、视图不刷新等问题，需在 activated 中刷新数据，在 deactivated 中清理资源如定时器，以避免副作用。

Vue的keep-alive组件是如何缓存组件的？

Vue 的

keep-alive

登录后复制

组件其实是一个抽象组件，它本身不会渲染成真实的 DOM 元素。它的作用是缓存内部动态切换的组件，避免重复创建和销毁，从而提升性能。

简单来说，当使用

<keep-alive>

登录后复制

包裹一个动态组件（比如通过

component is

登录后复制

动态切换的组件）时，Vue 会把这些被切换出去的组件保留在内存中，而不是直接销毁它们。这样在下次切换回来的时候，就可以直接复用之前的状态，不需要重新加载或初始化。

下面是一些关键点和使用建议：

立即学习“前端免费学习笔记（深入）”；

keep-alive

登录后复制

是如何工作的？

keep-alive

登录后复制

主要是通过 Vue 内部的组件实例管理机制来实现的。当你在

<keep-alive>

登录后复制

中包裹一个组件并切换它时，Vue 并不会真正卸载这个组件，而是将其从 DOM 中移除，并保存其组件实例到内存中。

切换进来时触发
```
activated
```
登录后复制
钩子
切换出去时触发
```
deactivated
```
登录后复制
钩子

这两个生命周期钩子非常适合做一些资源控制或者状态保存的操作。

举个例子：

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

登录后复制

在这个结构中，如果你有两个 tab 组件 A 和 B，切换到 B 的时候，A 不会被销毁，而是进入“缓存”状态。

2. 控制哪些组件需要缓存：

include

登录后复制

和

exclude

登录后复制

有时候我们并不想缓存所有组件，这时候可以使用

include

登录后复制

和

exclude

登录后复制

属性来精确控制：

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

查看详情

```
include
```
登录后复制
：只有匹配的组件名才会被缓存
```
exclude
```
登录后复制
：匹配的组件不会被缓存

例如：

<keep-alive>
  <component :is="currentTabComponent" v-if="currentTabComponent" />
</keep-alive>

登录后复制

export default {
  components: {
    TabA,
    TabB
  }
}

登录后复制

如果只想缓存

TabA

登录后复制

，可以这样写：

<keep-alive>
  <component :is="currentTabComponent" v-if="currentTabComponent" />
</keep-alive>

登录后复制

注意：组件必须设置了

name

登录后复制

属性才能被正确识别。

3. 缓存带来的副作用与处理方式

虽然

keep-alive

登录后复制

能提高性能，但也可能带来一些副作用，比如：

页面状态不会重置（比如表单输入、异步数据）
数据更新后视图不刷新（因为组件没有重新创建）

所以使用时需要注意：

在
```
activated
```
登录后复制
钩子中做必要的刷新操作
在
```
deactivated
```
登录后复制
钩子中清理定时器或取消订阅等操作

举个例子：

activated() {
  this.fetchData(); // 每次激活时重新拉取数据
},
deactivated() {
  clearInterval(this.timer); // 清理定时器
}

登录后复制

基本上就这些。

keep-alive

登录后复制

的机制不算复杂，但理解清楚它的生命周期和适用场景，能帮助我们在开发中更好地优化体验。

以上就是Vue的keep-alive组件是如何缓存组件的？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Vue的过渡（transition）组件有哪些动画钩子？ Vue的v-for和v-if为什么不能同时使用？ Vue的functional组件有哪些特点和限制？ Vue的keep-alive组件是如何缓存组件的？ Vue的指令（directive）是如何注册和使用的？

Vue的keep-alive组件是如何缓存组件的？

1.
keep-alive
登录后复制
是如何工作的？

2. 控制哪些组件需要缓存：
include
登录后复制
和
exclude
登录后复制

3. 缓存带来的副作用与处理方式

大家都在看：

Vue的keep-alive组件是如何缓存组件的？

1. keep-alive登录后复制 是如何工作的？

2. 控制哪些组件需要缓存：include登录后复制 和 exclude登录后复制

3. 缓存带来的副作用与处理方式

大家都在看：

1.
keep-alive
登录后复制
是如何工作的？

2. 控制哪些组件需要缓存：
include
登录后复制
和
exclude
登录后复制