虚拟Dom的原理 笔记

前端页面都是由dom元素构成的，比如这个页面的标题，导航，都是嵌套的一个又一个的dom元素；

虚拟dom指的是用js构造的一个虚拟的dom对象，比如说：

<div id="ee">内容</div>
{
  tag:'div',
  attrs:{
    id:'ee'
  }
  text:'内容',
  children:[]
}

为什么需要虚拟dom；因为真实dom的操作成本太高了，vue是数据驱动视图，真实dom不像举例的js对象，真实的dom之中的属性或者隐藏值远比我们构造的对象要多；所以用虚拟dom去进行操作比真实的dom操作效率更高，构建成本更小；

vue的源码中包含一个Vnode类，可以构建出各种类型的虚拟dom；虚拟dom节点对象是VNode的实例；

在视图渲染之前，template模版会被生成虚拟的dom节点缓存下来，之后进行视图发生改变的时候，会把新生成的VNode对象去跟之前缓存的上次的虚拟dom进行对比，把有差异的节点创造出真实的dom节点插入到视图上；以此完成视图的更新；

新旧虚拟dom节点比对的过程涉及到diff算法，是提高比对效率的一个算法，diff算法的过程也叫做patch（补丁），将新的VNode作为基准，把旧的VNode做对比；如果新的有的节点，旧的没有，那么就在旧的VNode上增加这个节点；修改删除也以此类推；最终更新的是修改过的旧的VNode，修改成本较小；

增加，删除是较简单的，更新的逻辑较多；增加需要判断是那种节点进行针对性的新增，删除就直接removeChild。

更新为什么复杂呢，是因为子节点的影响，一般双层循环，外层新数组，内层旧数组，进行比对，主要分为几种情况：

• 循环完一遍内层之后，仍然找不到对应的子节点，这也就说明该子节点是这次新增的节点元素；
• 完全循环之后，发现内层的数据还有一些没有对应上的，说明是废弃的节点，就执行删除操作；
• 如果循环时发现 节点有对应上，但是位置不同，那么就移动该子节点；

社区中对更新节点做了进一步的解释：

增加节点时，循环时发现找不到该节点，应该放在未处理的节点之前，就是说处理过的会标记已处理，新增的不应该放在已处理之后，而是未处理之前；因为若有两个连续新增的话，已处理之后就会产生问题；移动节点也是类似的逻辑，放在未处理的节点之前；

可是如果节点数量很多，那么vue源码中双重循环比对的这个过程是存在优化的部分的：

普通的双重循环面对大量节点时的时间复杂度较高；所以做了四个特殊位置的判断：新的节点的最前，新的节点的最后，旧的节点的最前，旧的节点的最后；

 

如果这四种特殊位置比对都不匹配，那么就按照正常的循环顺序来，但是循环一般是两个方向的，从前往后以及从后往前；

之后循环比对完发现新的还没到头，就把新的剩下的子节点都增添到旧的子节点末尾；