Vue动态组件与keep-alive配合可减少重复渲染、保留状态、节省资源；关键在于通过<component :is>实现响应式切换，用<KeepAlive>结合include/exclude/max精准控制缓存策略，并利用activated/deactivated钩子管理生命周期。
Vue.js 中动态组件与缓存配合得当，能显著减少重复渲染、保留状态、节省资源。关键不是“用不用”，而是“在哪用、怎么控、如何收尾”。
动态组件是基础，<component :is> 要配响应式控制
动态切换组件时，仅靠 v-if 或反复 import 会触发完整销毁重建。应统一用 <component :is="currentComponent">，并确保 currentComponent 是响应式变量（如 ref 或 reactive）。组件定义需提前注册或按需导入，避免运行时异常。
- 推荐把组件对象存为
const components = { A: defineAsyncComponent(() => import('./A.vue')), B: defineAsyncComponent(() => import('./B.vue')) }，兼顾懒加载与类型安全 - 不要在
:is中直接写字符串字面量（如:is="'MyComponent'"），否则无法被 Vue 正确识别和追踪 - 若组件名来自 API 或用户输入，务必做白名单校验，防止非法组件注入
<KeepAlive> 不是开关，而是缓存策略的执行器
<KeepAlive> 本身不自动决定“缓存谁”，它依赖明确的规则才能生效。包裹动态组件只是第一步，真正起作用的是 include、exclude 和 max 的组合配置。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
include接受组件名字符串、正则或数组，只缓存匹配项；exclude则反向排除——例如:exclude="/^Editor.*/"可跳过所有编辑器类组件，避免表单状态污染 -
:max="5"控制缓存上限，超出时按 LRU（最近最少使用）策略剔除最早缓存的实例，防止内存泄漏 - 组件必须有明确的
name选项（哪怕只是字符串），否则include/exclude无法匹配
路由场景下，缓存逻辑要和 meta 字段联动
在 <router-view> 场景中，单纯包裹 <KeepAlive> 会缓存所有路由组件，往往不符合业务需求。更合理的方式是读取路由元信息，动态控制是否启用缓存。
立即学习“前端免费学习笔记（深入）”；
- 路由配置中设置
meta: { keepAlive: true }，并在模板中写：<KeepAlive :include="cachedNames"><router-view /></KeepAlive>，其中cachedNames是从$route.matched中提取的、满足keepAlive条件的组件名数组 - 也可用
v-if分离缓存与非缓存视图：<KeepAlive v-if="$route.meta.keepAlive"><router-view /></KeepAlive><router-view v-else /> - 注意：相同路由不同参数（如
/user/1和/user/2）默认共用一个缓存实例，如需隔离，应在组件内通过serverCacheKey（SSR）或手动重置状态处理
缓存组件的生命周期钩子比 mounted 更实用
被 <KeepAlive> 包裹的组件不会反复触发 mounted 和 unmounted，取而代之的是 activated 和 deactivated。这两个钩子才是管理缓存状态的核心入口。
-
activated中适合恢复定时器、重新订阅事件、检查数据新鲜度（比如对比 lastFetchTime 是否过期） -
deactivated中必须清理副作用：清除setInterval、取消未完成的请求、释放第三方库实例（如地图 SDK 的 destroy 方法） - 避免在
activated里无条件发请求——可加节流或判断数据是否已存在，否则用户来回切换时频繁刷接口
