Vue组件绑定:key的作用及触发卸载再挂载的原因问询

1. 单个组件绑定:key的作用 #

在非循环场景下给单个组件绑定:key，核心作用就是强制触发组件的完整生命周期重置——也就是让组件先卸载再重新挂载。常见的使用场景包括：

• 一键重置组件内部状态：比如表单组件填了内容后，想清空回到初始状态，不用逐个重置数据，直接改key就能让组件回到刚挂载时的干净状态。
• 清除组件内部副作用：如果组件里有定时器、监听事件、滚动位置缓存这类副作用，改key会触发卸载钩子，自动清理这些副作用，再挂载新实例时重新初始化。
• 绕过响应式限制强制刷新：当组件依赖的深层数据变化没被Vue响应式系统检测到时，改key可以强制让组件重新渲染，确保拿到最新的数据。

2. 为什么:key变化会触发卸载再挂载？ #

Vue的虚拟DOM diff算法是靠key来识别节点身份的：

• 当同一个位置的组件key值改变时，Vue会判定这是一个全新的组件节点，而非原有节点的更新。
• 它不会去对比新旧组件的差异做局部更新，而是直接销毁旧的组件实例（触发beforeUnmount、unmounted钩子），然后创建并挂载新的组件实例（触发beforeMount、mounted钩子），以此完成组件的完全重建。

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