开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
本站所有源码均为自动秒发货，默认（百度网盘）
在Vue开发中，动态组件切换是很常见的场景——比如标签页切换、路由切换、弹窗切换等。但你大概率遇到过这样的问题：切换回之前的组件时，之前输入的内容、滚动的位置、请求的数据全都“重置”了，用户体验大打折扣。
比如做一个多标签表单，用户在第一个标签填写了部分内容，切换到第二个标签后再切回来，之前填写的内容消失了；又比如列表页滚动到第100条数据，切换到详情页再返回，列表又回到了顶部。这些问题的核心，本质是「组件切换时的状态丢失」。
而Vue内置的`keep-alive`组件，就是专门解决这个问题的“神器”。今天就来从头到尾梳理清楚：动态组件切换时为什么会丢失状态？`keep-alive`到底是什么、有什么用？以及如何正确使用它来优化用户体验。
一、先搞懂：动态组件切换，状态为什么会丢失？
要理解状态丢失的原因，首先要明确Vue组件的生命周期规律：当组件被切换隐藏时，默认会触发`beforeDestroy`和`destroyed`钩子，组件实例会被销毁，组件内的data、DOM结构都会被清空；当再次切换显示该组件时，会重新触发`beforeCreate`、`created`、`mounted`等钩子，生成一个全新的组件实例。
简单说，默认情况下，组件切换 = 旧实例销毁 + 新实例创建。既然是全新的实例，之前的状态自然也就不存在了。
举个简单的例子，我们用`component`标签实现动态组件切换：
<template> <div> <button @click=”currentComponent = ‘ComponentA'”>组件A</button> <button @click=”currentComponent = ‘ComponentB'”>组件B</button> <component :is=”currentComponent”></component> </div> </template> <script> import ComponentA from ‘./ComponentA.vue’ import ComponentB from ‘./ComponentB.vue’ export default { components: { ComponentA, ComponentB }, data() { return { currentComponent: ‘ComponentA’ } } } </script>
当我们点击“组件B”再切回“组件A”时，ComponentA会被重新创建，里面的输入框内容、data中的变量都会重置。这就是默认行为下的状态丢失，对于需要保留状态的场景，这种体验显然是不可接受的。
二、keep-alive的核心作用：缓存组件，保留状态
`keep-alive`是Vue的内置抽象组件（抽象组件即自身不会渲染为DOM元素，也不会出现在组件树中），它的核心作用就是：缓存被包裹的组件实例，避免组件在切换时被销毁和重新创建。
简单来说，被`keep-alive`包裹的组件，在切换隐藏时，不会触发`destroyed`钩子，而是触发`deactivated`钩子（失活）；当再次切换显示时，不会触发`mounted`钩子，而是触发`activated`钩子（激活）。组件实例被缓存起来，里面的data、DOM状态都会被完整保留。
这就好比我们在电脑上打开多个软件，切换到其他软件时，之前的软件不会被关闭，只是最小化，再次切换回来时，还是之前的界面状态——`keep-alive`就相当于给组件加了一个“最小化”功能，而不是“关闭”功能。
2.1 keep-alive的核心价值
除了保留组件状态，`keep-alive`还有两个非常实用的价值，尤其在性能优化上：
-
减少组件渲染开销：组件的创建和销毁是有性能成本的，尤其是包含复杂DOM、请求数据的组件。缓存后，只需创建一次，后续切换只需激活，大幅提升切换效率。
-
减少网络请求：如果组件切换时需要请求接口（比如列表数据），缓存后无需再次请求，直接复用之前的数据，既节省带宽，又提升页面响应速度。
2.2 补充：keep-alive不是“万能的”
需要注意的是，`keep-alive`只适用于动态组件切换（比如`component`标签切换、路由切换），对于组件的条件渲染（比如`v-if`），是无法缓存的——因为`v-if=”false”`时，组件会被销毁，`keep-alive`无法阻止。
另外，`keep-alive`缓存的是组件实例，会占用一定的内存，因此不建议缓存过多组件，避免内存溢出。对于不需要保留状态的组件（比如一次性弹窗），无需使用`keep-alive`。
三、实战：如何使用keep-alive保留组件状态？
`keep-alive`的使用非常简单，只需用它包裹需要缓存的动态组件即可。下面分两种最常见的场景，讲解具体用法。
3.1 场景1：普通动态组件切换（component标签）
修改上面的例子，用`keep-alive`包裹`component`标签，即可实现组件状态缓存：
<template> <div> <button @click=”currentComponent = ‘ComponentA'”>组件A</button> <button @click=”currentComponent = ‘ComponentB'”>组件B</button> <!– 用keep-alive包裹需要缓存的动态组件 –> <keep-alive> <component :is=”currentComponent”></component> </keep-alive> </div> </template>
此时，切换组件时，ComponentA和ComponentB的实例都会被缓存，输入的内容、data状态都会保留。比如在ComponentA的输入框中输入“测试内容”，切换到ComponentB后再切回来，“测试内容”依然存在。
3.2 场景2：路由切换（最常用）
在单页应用中，路由切换本质也是动态组件切换（切换的是路由对应的组件）。默认情况下，路由切换会销毁上一个路由的组件实例，导致状态丢失（比如列表页切换到详情页，再返回列表页，列表滚动位置重置）。
用`keep-alive`包裹`router-view`，即可缓存路由对应的组件：
<template> <div id=”app”> <router-link to=”/home”>首页</router-link> <router-link to=”/list”>列表页</router-link> <!– 缓存所有路由组件 –> <keep-alive> <router-view></router-view> </keep-alive> </div> </template>
这样一来，切换路由时，路由对应的组件实例会被缓存，状态得以保留。比如在列表页滚动到第50条数据，切换到首页再返回列表页，依然停留在第50条数据的位置。
3.3 进阶：按需缓存（include/exclude）
如果我们不想缓存所有组件，只想缓存部分组件，或者排除某些组件，可以使用`keep-alive`的`include`和`exclude`属性：
-
include：指定需要缓存的组件名（数组或字符串，多个组件用逗号分隔），只有匹配的组件才会被缓存。
-
exclude：指定不需要缓存的组件名，匹配的组件不会被缓存，优先级高于`include`。
示例：只缓存ComponentA和ComponentB，排除ComponentC：
<keep-alive :include=”[‘ComponentA’, ‘ComponentB’]” :exclude=”[‘ComponentC’]”> <component :is=”currentComponent”></component> </keep-alive>
注意：组件名必须是组件的`name`选项的值（不是组件文件名），否则无法匹配。
四、原理初探：keep-alive是如何实现缓存的？
对于想深入理解的同学，这里简单说一下`keep-alive`的实现原理（基于Vue2，Vue3核心逻辑类似）：
1. `keep-alive`内部维护了一个缓存对象（cache），用于存储被缓存的组件实例，还有一个 keys 数组，用于记录缓存实例的顺序（避免缓存过多）。
2. 当组件被包裹在`keep-alive`中，切换时：
-
如果组件实例已在缓存中，直接复用该实例，触发`activated`钩子，不执行`mounted`。
-
如果组件实例不在缓存中，创建新实例，存入缓存，触发`mounted`钩子。
3. 当缓存数量超过`max`属性（`keep-alive`的`max`属性可指定最大缓存数量）时，会按照LRU（最近最少使用）策略，删除最久未使用的组件实例，避免内存溢出。
简单总结：`keep-alive`的核心就是“复用组件实例”，通过缓存实例来保留组件的状态，本质是对组件实例的生命周期进行了“拦截”——阻止销毁，复用创建。
五、常见问题与注意事项
5.1 缓存后，组件的生命周期钩子变化
被`keep-alive`缓存的组件，生命周期钩子会发生变化：
-
首次渲染：`beforeCreate` → `created` → `mounted` → `activated`
-
切换隐藏：`deactivated`（不会触发`destroyed`）
-
切换显示：`activated`（不会触发`mounted`）
因此，需要在组件切换时执行的逻辑（比如刷新数据、重置部分状态），建议放在`activated`和`deactivated`钩子中，而不是`mounted`和`destroyed`。
5.2 缓存组件中的数据更新问题
如果缓存的组件需要根据外部数据更新，可能会出现“数据不更新”的问题——因为组件实例被复用，`mounted`钩子不会再次执行，数据初始化逻辑无法触发。
解决方案：将数据更新逻辑放在`activated`钩子中，或者监听外部数据的变化（比如用`watch`），当数据变化时手动更新组件内的状态。
5.3 避免过度缓存
虽然`keep-alive`能提升性能，但过度缓存会占用更多内存，尤其是对于包含大量DOM、大数据的组件。建议只缓存需要保留状态的组件，对于一次性组件、无需保留状态的组件，不要使用`keep-alive`。
六、总结
回到最初的问题：动态组件切换时如何保留组件状态？答案就是使用Vue内置的`keep-alive`组件。
一句话概括`keep-alive`的作用：缓存组件实例，阻止组件销毁，保留组件状态，提升切换性能和用户体验。
在实际开发中，无论是普通动态组件切换，还是路由切换，只要需要保留组件状态（比如表单输入、滚动位置、请求数据），都可以用`keep-alive`来解决。同时，结合`include`、`exclude`、`max`等属性，可以实现更精细的缓存控制，兼顾性能和体验。
最后提醒：使用`keep-alive`时，要注意组件生命周期钩子的变化，避免出现数据更新不及时的问题，同时避免过度缓存，合理利用缓存提升应用性能。
