vue动态组件生命周期管理取决于是否使用keep-alive：不加时每次切换触发完整卸载/挂载流程；加后缓存实例，仅调用onactivated/ondeactivated，保留状态与dom。

集简云

一款面向企业自动化的应用集成与流程编排平台，通过连接不同软件和服务，让业务数据能够在多个系统之间自动流转。

下载

Vue 渲染器对动态组件实例的生命周期管理，核心在于区分“销毁重建”和“缓存复用”两种模式。是否触发完整的挂载/卸载流程，取决于你是否用 `` 包裹了 ``。

不加 keep-alive：每次切换都走完整生命周期

当只用 `` 且未包裹 `` 时，渲染器会在切换组件时：
• 卸载当前组件：依次调用 beforeUnmount → unmounted
• 创建新组件：依次调用 beforeCreate → created → beforeMount → mounted
这意味着每次切换都会重新初始化 data、重新执行 created 中的逻辑、重新挂载 DOM，开销较大，也丢失内部状态（比如表单输入、滚动位置）。

加 keep-alive：组件被缓存，跳过销毁与重建

一旦用 `` 包裹动态组件，渲染器就不再销毁实例，而是将其移入缓存池，进入“非活跃”状态：
• 切换离开时：不触发 beforeUnmount 和 unmounted，而是调用 onDeactivated
• 切换回来时：不走 created/mounted，而是直接恢复并调用 onActivated
• 组件实例始终保留在内存中，data、DOM 节点、内部定时器等均被保留，只是脱离文档流。

keep-alive 的缓存控制细节

渲染器根据 `` 的配置决定哪些实例参与缓存：
• include：只缓存匹配名称的组件（支持字符串、正则、数组）
• exclude：跳过匹配名称的组件（优先级高于 include）
• max：限制缓存数量，超出时按 LRU 策略剔除最久未激活的实例
注意：组件必须有明确的 name 选项（或通过 defineOptions({ name: 'xxx' }) 设置），否则无法被 include/exclude 匹配。

实际开发中要注意的关键点

• onActivated 和 onDeactivated 是缓存组件唯一可靠的“进出”钩子，适合做数据拉取、状态保存、定时器启停
• 不要在 mounted 或 created 中写“仅需执行一次”的逻辑，因为它们在缓存模式下不会重复触发
• 如果组件需要响应路由参数变化，应在 onActivated 中监听 useRoute() 或 watch $route
• 缓存会占用内存，对长列表页、富编辑器等重型组件，建议配合 max 或动态 exclude 使用