vue2中实现运行时内存缓存，需组件有name且被包裹；推荐按路由meta控制缓存，配合activated钩子刷新数据，并可用include/exclude精细筛选。
Vue2 中用 <keep-alive></keep-alive> 缓存组件，核心就是让切换出去的组件不销毁、保状态、少渲染。 它不是持久化存储，而是运行时内存缓存——页面刷新就清空，但路由或标签页来回切时，输入框内容、滚动位置、data 数据都还在。
怎么写才能生效
必须满足两个前提：
- 被缓存的组件得有明确的
name（全局/局部注册时自动有，单文件组件建议显式声明name: 'MyComponent'） - 把要缓存的组件包在
<keep-alive></keep-alive>里，比如<keep-alive><router-view></router-view></keep-alive>或<keep-alive><component :is="currentView"></component></keep-alive>
只缓存需要的页面，别一刀切
全包 <router-view></router-view> 容易出问题——比如详情页每次返回都看到旧数据。推荐按路由配置控制：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 路由定义里加
meta: { keepAlive: true }，例如：{ path: '/list', component: List, meta: { keepAlive: true } } - 模板中配合判断：
<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive>
再配一个不缓存的备用：<router-view v-if="!$route.meta.keepAlive"></router-view>
组件激活时刷新数据
缓存后 mounted 只执行一次，后续切回来不会触发。想每次显示最新数据，得用专属钩子：
- 在组件内使用
activated钩子（对应deactivated），它在每次从缓存恢复时执行 - 把数据请求逻辑抽成函数，
mounted和activated都调用它 - 注意：如果用户用浏览器后退键返回，
activated也会触发；但如果是点击导航链接跳转回来，同样生效——不用区分跳转方式
精细控制缓存范围
用 include 或 exclude 属性过滤组件：
-
<keep-alive include="UserList,Profile"><router-view></router-view></keep-alive>—— 只缓存 name 是 UserList 或 Profile 的组件 -
<keep-alive exclude="Detail"><router-view></router-view></keep-alive>—— 除 Detail 外都缓存 - 支持正则，比如
exclude="/^Detail/"排除所有以 Detail 开头的组件名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
