在 Vue 框架中，key 属性在虚拟 DOM 更新时发挥什么作用？请说明其底层的实现原理是什么？

回答思路

1. 【回答框架 1】key 是虚拟 DOM 节点的唯一标识，用于在 diff 过程中快速判断节点是否可复用。Vue 的 patch 算法在更新子节点列表时，会通过 key 进行比对，优先复用相同 key 的节点，减少 DOM 操作。
2. 【回答框架 2】当列表数据发生变化时，Vue 会对比新旧虚拟节点列表，如果 key 相同则认为是同一节点，只更新其属性或子节点，而不重新创建；如果 key 不同则视为新节点，进行插入或删除操作。
3. 【回答框架 3】key 的实现原理基于哈希映射，Vue 通过 key 建立索引，可以在 O(n) 时间内完成列表的 diff，无需遍历所有节点。若不使用 key，Vue 会采用就地复用策略，可能导致状态错乱。
4. 【回答框架 4】key 的使用场景主要包括 v-for 列表渲染，以及需要强制替换组件的场景（如复用组件时使用不同的 key 触发重建）。
5. 【关键点 1】key 是 Vue diff 算法的优化手段，用于识别节点复用。
6. 【关键点 2】key 相同则复用，key 不同则重建。
7. 【关键点 3】不使用 key 时可能导致组件状态错乱。
8. 【关键点 4】key 应使用唯一且稳定的值，如 id，避免使用索引。
9. 【易错点 1】使用 index 作为 key 在列表增删时可能导致节点复用错误。
10. 【易错点 2】key 只对同级子节点生效，不能跨层级复用。