# 虚拟 DOM 和 Diff 算法

虚拟 DOM 产生是因为真实 DOM 的体积通常非常大,当需要进行页面更新时若使用真实 DOM 进行比较会消耗大量时间和内存,效率十分低下。而如果使用虚拟 DOM,仅需要保留必要的属性,进行比较时速度会快上很多而且所占资源也非常少。

# Diff 算法运行原理

Diff 算法进行比较时最小的比较粒度是一个标签,当一个标签发生变化时 Diff 就会运行进行新旧虚拟 DOM 的比较。

# key 的作用

key 值是作为虚拟 DOM 对象的标识,在更新显示时 key 值作为索引去拿去和旧 DOM 对象比较。

当状态中的数据发生变化时,vue 会根据新数据的生成新的 DOM,随后会拿新 DOM 和旧 DOM 进行 Diff 比较。

  • 虚拟 DOM 中找到了与新虚拟 DOM 相同的 key:
    • 若虚拟 DOM 中内容没有变化,直接使用之前的真实 DOM
    • 若虚拟 DOM 中的内容发生变化,则生成新的真实 DOM
  • 旧虚拟 DOM 中没有找到与新虚拟 DOM 相同的 key,直接根据数据创建新的真实 DOM 渲染到页面。只会创建新 key 值虚拟 DOM 的真实 DOM

# 用 index 做 key 可能引发的问题

  • 若对数据进行逆序添加、逆序删除等会破坏数据顺序的操作,会产生不必要的真实 DOM 更新,虽然界面显示没有问题,但是效率会很低
  • 如果结构中还包含输入类的 DOM 则会产生错误的 DOM 更新,最常见的就是导致了页面输入 DOM 中的数据错乱