vue 的 keep-alive 组件是一个抽象组件，不会渲染为真实 dom，主要用于缓存动态切换的组件以提升性能。1. 它通过保存组件实例到内存中而非销毁，实现组件切换时的状态保留，并在激活和失活时分别触发 activated 和 deactivated 生命周期钩子；2. 可通过 include 和 exclude 属性控制缓存策略，仅缓存指定组件或排除特定组件，但需确保组件设置了 name 属性；3. 使用 keep-alive 可能带来状态不重置、视图不刷新等问题，需在 activated 中刷新数据，在 deactivated 中清理资源如定时器，以避免副作用。
Vue 的
keep-alive组件其实是一个抽象组件，它本身不会渲染成真实的 DOM 元素。它的作用是缓存内部动态切换的组件，避免重复创建和销毁，从而提升性能。
简单来说，当使用
包裹一个动态组件（比如通过
component is动态切换的组件）时，Vue 会把这些被切换出去的组件保留在内存中，而不是直接销毁它们。这样在下次切换回来的时候，就可以直接复用之前的状态，不需要重新加载或初始化。
下面是一些关键点和使用建议：
立即学习“前端免费学习笔记（深入）”；
1. keep-alive
是如何工作的？
keep-alive主要是通过 Vue 内部的组件实例管理机制来实现的。当你在
中包裹一个组件并切换它时，Vue 并不会真正卸载这个组件，而是将其从 DOM 中移除，并保存其组件实例到内存中。
- 切换进来时触发
activated
钩子 - 切换出去时触发
deactivated
钩子
这两个生命周期钩子非常适合做一些资源控制或者状态保存的操作。
举个例子：
在这个结构中，如果你有两个 tab 组件 A 和 B，切换到 B 的时候，A 不会被销毁，而是进入“缓存”状态。
JTBC网站内容管理系统5.0.3.1
下载
JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架，开源协议为AGPLv3，没有任何附加条款。系统可以通过命令行一键安装，源码方面不基于任何第三方框架，不使用任何脚手架，仅依赖一些常见的第三方类库如图表组件等，您只需要了解最基本的前端知识就能很敏捷的进行二次开发，同时我们对于常见的前端功能做了Web Component方式的封装，即便是您仅了解HTML/CSS也
2. 控制哪些组件需要缓存：include
和 exclude
有时候我们并不想缓存所有组件，这时候可以使用
include和
exclude属性来精确控制：
include
：只有匹配的组件名才会被缓存exclude
：匹配的组件不会被缓存
例如：
export default {
components: {
TabA,
TabB
}
}如果只想缓存
TabA，可以这样写：
注意：组件必须设置了
name属性才能被正确识别。
3. 缓存带来的副作用与处理方式
虽然
keep-alive能提高性能，但也可能带来一些副作用，比如：
- 页面状态不会重置（比如表单输入、异步数据）
- 数据更新后视图不刷新（因为组件没有重新创建）
所以使用时需要注意：
- 在
activated
钩子中做必要的刷新操作 - 在
deactivated
钩子中清理定时器或取消订阅等操作
举个例子：
activated() {
this.fetchData(); // 每次激活时重新拉取数据
},
deactivated() {
clearInterval(this.timer); // 清理定时器
}基本上就这些。
keep-alive的机制不算复杂，但理解清楚它的生命周期和适用场景，能帮助我们在开发中更好地优化体验。
