坐忘道

Appearance

列表渲染 ​

Vue 2使用Virtual DOM(虚拟DOM)来提高渲染效率, 其核心是高效的diff算法(也称为patch算法)

diff算法算法用于比较新旧虚拟DOM树的差异, 并最小化对实际DOM的操作

基本概念 ​

  • Virtual DOM：轻量级的JavaScript对象, 表示真实DOM的结构
  • Diff算法: 比较新旧Virtual DOM的差异, 找出需要更新的部分
  • Patch: 将差异应用到真实 DOM 上

Diff 算法核心策略 ​

Vue 2的diff算法采用以下策略来优化性能:

  • 同级比较: 只比较同一层次的节点, 不跨层级比较
  • 双端比较: 同时从新旧节点的两端向中间比较
  • key的重要性: 使用key来识别节点身份, 提高复用效率

虚拟 DOM 中 key 的作用 ​

key是虚拟DOM对象的标识, 当状态中的数据发生变化时, Vue会根据新数据生成新的虚拟DOM

随后Vue将**新虚拟DOM与旧虚拟DOM**进行差异比较

对比规则 ​

旧虚拟DOM中找到了与新虚拟DOM相同的key:

  • 若虚拟DOM中内容没变, 为了节省性能会直接使用之前的真实DOM, 不会重新渲染
  • 若虚拟DOM中内部变了, 则生成新的真实DOM, 随后替换掉页面中之前的真实DOM

旧虚拟DOM中未找到与新虚拟DOM相同的key:

  • 创建新的真实DOM, 随后渲染到页面中

为什么不要使用下标作为 key ​

若对数据进行逆向添加、逆向删除等破坏顺序的操作时:

  • 会产生没有毕要的真实DOM更新, 页面效果没问题但效率低

若结构中包含输入类的DOM时:

  • 会产生错误的DOM更新, 页面会出问题

如何渲染 key ​

最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值

如果不存在对数据的逆向添加、逆向删除等破坏顺序的操作, 仅用于渲染列表展示, 使用下标index作为key是没有问题的

示例图 ​

  • 将下标index作为key时

index-key

  • 将唯一id作为key时

id-key