Vue2组件缓存如何使用 缓存组件状态避免重复渲染

Vue2中<keep-alive>实现运行时内存缓存，需组件有name且被包裹；推荐按路由meta控制缓存，配合activated钩子刷新数据，并可用include/exclude精细筛选。

Vue2 中用 <keep-alive> 缓存组件，核心就是让切换出去的组件不销毁、保状态、少渲染。 它不是持久化存储，而是运行时内存缓存——页面刷新就清空，但路由或标签页来回切时，输入框内容、滚动位置、data 数据都还在。

怎么写才能生效

必须满足两个前提：

1. 被缓存的组件得有明确的 name（全局/局部注册时自动有，单文件组件建议显式声明 name: 'MyComponent'）
2. 把要缓存的组件包在 <keep-alive> 里，比如 <keep-alive><router-view></router-view></keep-alive> 或 <keep-alive><component :is="currentView"></component></keep-alive>

只缓存需要的页面，别一刀切

全包 <router-view> 容易出问题——比如详情页每次返回都看到旧数据。推荐按路由配置控制：

1. 路由定义里加 meta: { keepAlive: true }，例如：{ path: '/list', component: List, meta: { keepAlive: true } }
2. 模板中配合判断：<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive>

   再配一个不缓存的备用：<router-view v-if="!$route.meta.keepAlive"></router-view>

组件激活时刷新数据

缓存后 mounted 只执行一次，后续切回来不会触发。想每次显示最新数据，得用专属钩子：

1. 在组件内使用 activated 钩子（对应 deactivated），它在每次从缓存恢复时执行
2. 把数据请求逻辑抽成函数，mounted 和 activated 都调用它
3. 注意：如果用户用浏览器后退键返回，activated 也会触发；但如果是点击导航链接跳转回来，同样生效——不用区分跳转方式

精细控制缓存范围

用 include 或 exclude 属性过滤组件：

1. <keep-alive include="UserList,Profile"><router-view></router-view></keep-alive> —— 只缓存 name 是 UserList 或 Profile 的组件
2. <keep-alive exclude="Detail"><router-view></router-view></keep-alive> —— 除 Detail 外都缓存
3. 支持正则，比如 exclude="/^Detail/" 排除所有以 Detail 开头的组件名