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