虚拟 DOM 中 key 的作用

在虚拟 DOM 中，key 是每个虚拟 DOM 对象的标识。当数据发生变化时，Vue 或 React 会根据新数据生成新的虚拟 DOM，并且会使用 key 来区分新旧虚拟 DOM 对象。

对比规则

在 Vue 或 React 进行新旧虚拟 DOM 的比较时，会根据以下规则进行对比：

  • 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：
    • 若虚拟 DOM 中内容没变，则直接使用之前的真实 DOM。
    • 若虚拟 DOM 中内容变了，则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM。
  • 旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key：
    • 创建新的真实 DOM，随后渲染到页面。

用 index 作为 key 可能会引发的问题

在某些情况下，使用 index 作为 key 可能会引发以下问题：

  1. 若对数据进行逆序添加、逆序删除等破坏顺序的操作，会导致没有必要的真实 DOM 更新，从而影响效率（界面效果没问题）。
  2. 如果结构中还包含输入类的 DOM，会导致错误的 DOM 更新，从而影响界面的正确性。

如何选择 key

在开发过程中，可以按照以下原则来选择 key：

  1. 最好使用每条数据的唯一标识作为 key，比如 id、手机号、身份证号、学号等唯一值。
  2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的。