Vue 基础面试题, 在 Vue 的 v-for 循环中,key 有什么作用?

Step 1

Q:: 在 Vue 的 v-for 循环中，key 有什么作用？

A:: 在 Vue 的 v-for 循环中，key 属性用于唯一标识每个循环渲染的元素或组件。在更新列表时，Vue 会根据 key 来判断哪些元素需要被更新、移动或删除，从而提升渲染效率。如果不使用 key 或 key 设置不当，可能会导致 Vue 进行错误的 DOM 节点复用，导致出现意料之外的渲染结果。

Step 2

Q:: 在 Vue 中，为什么推荐使用 v-for 时设置 key？

A:: 使用 key 可以帮助 Vue 更加准确地识别节点，尤其在列表发生变动时（如增删或顺序改变）。这有助于 Vue 快速定位哪些节点需要更新，从而避免不必要的 DOM 操作，提高渲染性能，确保应用的一致性和稳定性。

Step 3

Q:: key 在 Vue 内部是如何工作的？

A:: Vue 在使用 v-for 渲染列表时，通过 key 属性来追踪每个列表项。当数据更新时，Vue 使用 key 来对比新旧节点，如果 key 相同，Vue 认为该节点无需重新创建，只需要更新内容即可；如果 key 不同，Vue 会认为这是一个新节点，从而创建新的 DOM 元素。