Vue中同一组件实例是否会经历挂载-卸载-重新挂载？

结论：同一个组件实例（已执行setup/created的上下文）绝对不会出现挂载后卸载、再重新挂载的情况

核心原因 #

Vue的组件实例生命周期是严格线性的：

• 实例创建后依次触发created、mounted钩子，完成初始化与DOM挂载
• 当实例被卸载时，触发unmounted钩子，此时实例的响应式依赖、DOM关联会被完全清理，实例生命周期彻底结束，不会被复用或再次触发挂载流程

对应测试场景的说明 #

• v-if条件切换：当v-if从true变为false时，组件实例会被销毁（触发unmounted）；再次变为true时，会创建一个全新的组件实例，重新执行setup/created和mounted，并非原实例的重新挂载
• v-for列表更新：若列表项的key发生变化，旧组件实例会被销毁，新实例被创建；若key保持不变，组件实例会被复用，仅触发更新相关钩子（如updated），不会经历卸载→挂载

关于created与mounted分离设计的澄清 #

这两个钩子的分离是为了区分「实例创建完成但DOM未挂载」和「DOM挂载完成」两个阶段，它们在同一个实例的生命周期中仅会执行一次，不存在setup未重新执行但mounted再次触发的情况

特殊场景：KeepAlive组件的缓存 #

使用<KeepAlive>包裹组件时，组件切换时会进入缓存状态（触发deactivated），而非真正卸载；再次激活时触发activated钩子，实例保持不变，但这不属于「卸载后重新挂载」的场景，因为unmounted从未被触发

内容的提问来源于stack exchange，提问作者spinkus