虚拟 DOM

虚拟 DOM 和真实的 DOM 相对应，一个能代表 DOM 树的对象，通常含有标签名，标签上的属性，事件监听和子元素们及其他属性。虚拟 DOM 再通过编译器编译成 js 渲染函数的代码，从而实现简将虚拟 DOM 转化为html 代码添加到页面当中。

• 优点：总有人说 DOM 操作慢，但是这个操作慢要看是和什么作对比，如果是和原生 js 对比，那么确实是慢的。虚拟 DOM 其实也是基于原生 DOM 再一次进行了封装，所以是不可能比原生 DOM 操作还快的，但是在某些情况下，确实虚拟 DOM 比原生 DOM 操作更加快速
  • 将多次操作合并为一次操作，通过 DOM diff 只操作新增的 DOM
  • 跨平台渲染：虚拟 DOM 本质是一个对象，可以把它转化为任何我们想要的样子，可以是小程序，ios 应用，安卓应用等

• 缺点：

  • js 语法不认识，需要额外的构建过程
  • DOM 规模较小时虚拟 DOM 更快

    DOM diff

    虚拟 DOM 的对比算法，通过比对渲染更新前后产生的两个虚拟 DOM 对象的差异，产出差异补丁对象，再将差异补丁对象应用到真实DOM 节点上

    dom diff的可能大概逻辑

• Tree diff：

  • 将新旧两棵树进行逐层对比，找出那些节点是需要更新的
  • 如果节点是组件就看2
  • 如果节点是标签就看3
• Component diff：
  • 如果节点是组件，就看组件类型
  • 类型不同删除旧的，直接替换
  • 类型相同则只更新属性
  • 然后深入组件做1
• Element diff：
  • 如果节点是原生标签，只看标签名
  • 标签名不同直接替换，否则只更新属性
  • 然后深入标签做

优点：速度快，效率高
缺点：同级节点对比有 bug

• 解决办法：使用 id 标记节点，不要用 index 标记