vue中虚拟dom和diff算法

什么是虚拟dom

• 通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。
• 所谓的Virtual dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM的节点。

为什么使用虚拟DOM

• 虚拟DOM的出现也是为了减弱频繁的大面积重绘引发的性能问题！

既然知道了什么是虚拟DOM，那为什么在Vue或者React这样的框架中，会考虑采用这样的方式？

• 其实在我们使用JQuery这样的库的时候，我们不禁会大量操作DOM，那么DOM元素的变化自然会引起页面的回流或者重绘，页面的DOM重排自然会导致页面性能下降，那么如何尽可能的去减少DOM的操作是框架需要考虑的一个重要问题！

真实DOM和虚拟DOM的区别

• 虚拟DOM不会进行排版与重绘操作
• 真实DOM频繁排版与重绘的效率是相当低的
• 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
• 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部

看两段简单的代码，也许会更容易理解：

这是一段真实DOM的代码：

<div>
    <p>test</p>
</div>

这是一段虚拟DOM的伪代码：

var Vnode = {
    tag: 'div',
    children: [
        { tag: 'p', text: 'test' }
    ]
};

DOM Diff

• 说完了虚拟DOM，我们了解到，这是一种为了尽可能减少页面频繁操作DOM的方式，那么在虚拟DOM中，通过什么方式才能做到呢，接下来便要说说DOM DiffDOM Diff指的是通过Diff算法去比较虚拟DOM的变化
• diff 算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

换句话说：

• diff 的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁

总结

• 当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
• 通过isSameVnode进行判断，相同则调用patchVnode方法
• patchVnode做了以下操作

1. 找到对应的真实dom，称为el
2. 如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
3. 如果oldVnode有子节点而VNode没有，则删除el子节点
4. 如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
5. 如果两者都有子节点，则执行updateChildren函数比较子节点

• updateChildren主要做了以下操作：

1. 设置新旧VNode的头尾指针
2. 新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作