一、keep-alive是啥？和vue-router结合能解决啥问题？

terry 3小时前阅读数 9 #Vue

文章标签 alive；vuerouter

咱做Vue项目时,肯定遇到过这种情况——从列表页点进详情页，返回后列表页又得重新请求数据、渲染组件，不仅加载慢还费性能；或者表单填了一半切到别的页面，回来全没了，用户体验糟心，这时候vue-router结合keep-alive就能解决这些痛点，但很多同学刚接触时，要么搞不懂怎么配置缓存规则，要么遇到缓存后数据不更新、内存溢出这些“坑”，今天就把keep-alive的用法、原理、实战技巧拆明白，看完能直接用到项目里。

先明确：keep-alive是Vue的内置组件，作用是缓存组件实例（不是简单缓存DOM，而是把组件的整个实例，包括数据、状态全“暂存”起来），平时组件切换时，Vue默认会销毁旧组件、创建新组件；有了keep-alive，符合条件的组件会被“保留”，切换回来时直接复用，不用重新走created、mounted这些钩子，性能提升特别明显。

和vue-router结合后，最核心的价值是页面级缓存，举几个常见场景：

列表页→详情页→返回列表页：列表页的滚动位置、筛选条件、已加载的列表数据能直接保留，用户不用重新操作，体验丝滑。
后台管理系统多标签页：用户打开多个页面（每个页面对应一个路由），切换时瞬间响应，不用重复加载页面内容。
表单页临时跳转：填了一半的表单，切到其他页再返回，输入的内容还在，不用重新填。

反过来想,如果没有keep-alive会怎样？比如列表页每次进入都要发请求、重新渲染，要是列表数据多，用户得等半天；表单页切回来全清空，用户心态直接崩，所以keep-alive本质是用“空间换时间”，通过缓存组件实例减少重复渲染，提升性能和体验。

keep-alive基本用法有哪些？和vue-router结合要注意啥？

先看最基础的配置,再聊和路由结合的细节。

基础操作：给router-view套keep-alive

最直接的用法是把包在里，像这样：

```vue ```

但别以为这样所有页面都被缓存了——keep-alive默认会缓存所有匹配的组件实例，但实际项目里我们往往需要“选择性缓存”，这就需要用到include、exclude、max这些属性。

精准控制缓存范围：include、exclude、max

这三个属性是keep-alive的“开关”，用来决定哪些组件该缓存、哪些该排除，以及最多缓存多少个。

include：只缓存组件name匹配的组件（注意是组件的name选项，不是路由的name），可以是字符串、数组、正则，比如只缓存List和Detail组件： ```vue ```
exclude：排除某些组件，语法和include一样，比如详情页数据要实时更新，就排除Detail： ```vue ```
max：最多缓存多少个组件实例，超出后用LRU（最近最少使用）算法淘汰，比如设置max="5"，第6个组件进入时，最久没被访问的那个会被销毁。

和vue-router结合的关键细节

很多同学配置后发现缓存不生效,大概率是踩了这些“细节坑”：

组件name必须和include/exclude对应：路由配置里的组件，必须显式写name（比如export default { name: 'List' }），不然include识别不到，举个反例：如果List组件没写name，哪怕include="List"也没用。
动态控制缓存：路由meta+计算属性：项目里经常需要“部分页面缓存”，比如列表页缓存、详情页不缓存，这时可以用路由元信息（meta）标记哪些页面要缓存，再结合计算属性动态控制include，示例：

路由配置（给需要缓存的页面加meta.keepAlive）： ```js { path: '/list', component: List, meta: { keepAlive: true } }, { path: '/detail', component: Detail, meta: { keepAlive: false } } ```
页面中动态控制include： ```vue ```
这里要注意：如果路由是懒加载（比如component: () => import('./List.vue')），必须确保List组件里显式定义name，否则this.$route.component.name拿不到！

keep-alive的缓存机制和生命周期变化

理解缓存机制和生命周期,才能避免“数据不更新”“钩子不执行”这些问题。

缓存的是“组件实例”，不是DOM

keep-alive缓存的是整个组件实例，包括data里的状态、methods里的逻辑，比如列表页的筛选条件存在data里，返回后还能保留——因为组件实例没被销毁，只是“暂时休眠”。

生命周期钩子的变化

组件被keep-alive包裹后，生命周期钩子会变：

没有keep-alive时，组件切换流程是：mounted → beforeDestroy → destroyed（销毁旧组件，创建新组件）。
有keep-alive时，组件切换流程是：mounted → deactivated（离开时） → activated（进入时）（组件实例被缓存，不会销毁）。

如果需要“每次进入组件都执行逻辑”（比如刷新数据），要把代码放到activated钩子里，而不是created/mounted（因为这俩只在组件第一次创建时执行）。

缓存的存储与淘汰：LRU算法

keep-alive内部用cache对象存组件实例，用keys数组存实例的key，当设置max时，超过数量后，会把最久没被访问的实例（keys数组里最前面的）销毁，这就是LRU（最近最少使用）算法，比如max=3，第4个组件进入时，keys[0]对应的实例会被移除缓存。

怎么实现“部分页面缓存”？比如列表页缓存，详情页不缓存？

项目里最常见的需求是“选择性缓存”，比如列表页要缓存、详情页不缓存，分享两种常用方法：

方法1：路由meta + 拆分router-view

思路：给需要缓存的页面加meta.keepAlive，然后用两个router-view，一个包在keep-alive里（对应keepAlive为true的页面），一个不包（对应false的）。

```vue ```

路由配置：

```js { path: '/list', component: List, meta: { keepAlive: true } }, { path: '/detail', component: Detail, meta: { keepAlive: false } } ```

这样List会被缓存,Detail不会，好处是简单直接，缺点是如果页面多，要频繁改meta和router-view结构。

方法2：include/exclude动态控制

思路：给组件设置name，然后根据路由meta动态控制include。

步骤：

给List组件设置name: 'List'，Detail设置name: 'Detail'（组件内部export default { name: 'XXX' }）。
在keep-alive的include里，根据路由meta动态传入要缓存的组件name。

```vue

```

这种方法更灵活,适合多页面精细控制，比如后台管理系统有十几个页面，有的要缓存、有的不要，用include结合vuex存需要缓存的组件名列表，能轻松实现。

嵌套路由的特殊处理

如果是嵌套路由（比如父路由是/layout，子路由是/layout/list和/layout/detail），父组件的缓存状态会影响子组件，比如父组件被缓存，子组件切换时也会被缓存，这时候要：

父路由的meta.keepAlive设为false，子路由自己控制缓存；
或者在父组件的router-view上用v-if区分是否缓存子组件，结合子路由的meta。

keep-alive常见问题及解决方案

实际开发中,这些问题很容易踩坑，提前避坑能省很多时间。

问题：缓存后数据不更新，列表页一直显示旧数据

原因：组件实例被缓存，created/mounted只执行一次，数据没重新请求。

解决方法：

在activated钩子中请求数据：因为每次进入组件都会触发activated，所以把请求数据的逻辑放这里。 ```js export default { activated() { this.fetchData() // 封装的请求数据方法 } } ```
监听路由参数变化：如果列表页是带参数的（tab/1 → /tab/2），参数变化时更新数据。 ```js watch: { '$route.params'() { this.fetchData() } } ```

问题：缓存太多组件导致内存溢出

原因：keep-alive默认不限制缓存数量，页面多了后内存占用过高。

解决方法：设置max属性，比如max="10"，超过后自动淘汰最近最少使用的组件。

问题：动态组件名不匹配，缓存失效

原因：include里写的组件名和实际组件的name不一致（比如大小写错了；或者路由懒加载时没给组件写name）。

解决方法：

确保组件的name选项和include/exclude严格一致（区分大小写）。
路由懒加载时,组件内部必须显式定义name： ```js // List.vue export default { name: 'List', // 必须写，不然include识别不到 ... } ```

问题：嵌套路由中父组件缓存影响子组件

场景：父路由/layout被缓存，子路由/layout/list和/layout/detail切换时，子组件也被缓存，导致不需要缓存的子组件也被保留状态。

解决方法：

父路由的meta.keepAlive设为false，子路由自己控制；
在父组件的router-view上用v-if区分是否缓存子组件，结合子路由的meta。

实际项目怎么设计缓存策略？

光懂技术还不够,得结合业务场景设计方案，分享几个常见场景的实践思路：

场景1：电商APP商品列表+详情页

需求：列表页（筛选、排序、滚动位置）要缓存；详情页（商品信息实时性高）不缓存。

实现：

路由配置：给/list加meta.keepAlive=true，/detail加false。
列表页数据更新：如果数据实时性要求高，在activated里请求数据；如果允许短时间缓存，第一次请求后复用数据，减少接口压力。
滚动位置保留：在deactivated时记录scrollTop，activated时设置回去（因为keep-alive缓存了组件实例，dom还在，scrollTop能保留）。

场景2：后台管理系统多标签页

需求：用户打开多个标签页（路由），切换时快速响应，关闭标签页时销毁缓存。

实现：

用keep-alive包裹router-view，结合max控制缓存数量（比如最多开10个标签）。
标签页的添加/删除逻辑：用vuex存当前打开的标签页name列表，动态绑定keep-alive的include，当用户打开新标签，把组件name加入include；关闭时，从include移除。
示例： ```vue ```

场景3：表单页面暂存数据

需求：用户填表单（比如申请单），中途切到其他页面，返回后表单数据还在。

实现：

表单组件用keep-alive缓存，确保data里的表单数据保留。
保险措施：在beforeRouteLeave钩子中，把表单数据临时存到vuex或sessionStorage，防止keep-alive失效时数据丢失。

keep-alive的核心是“缓存组件实例”，结合vue-router能解决页面切换时的性能和体验问题，但要注意精细控制缓存范围（用include/exclude/meta）、处理生命周期变化（activated/deactivated）、避免内存溢出（设置max），把这些点吃透，再结合业务场景设计策略，就能让keep-alive成为项目的“性能加速器”。