vue核心之虚拟DOM(vdom)

vdom是什么

• virtual dom ， 虚拟 DOM
• 用 js 模拟DOM结构

为什么需要虚拟DOM，它有什么好处?

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

• DOM操作非常昂贵
• DOM变化的对比，放在 js 层来做，提高效率
• 提高重绘性能

虚拟DOM的实现

真实DOM

用JS来模拟DOM节点实现虚拟DOM。

用js对象模拟DOM节点的好处是，页面的更新可以先全部反映在js对象上，操作内存中的js对象的速度显然要快多了。等更新完后，再将最终的js对象映射成真实的DOM，交由浏览器去绘制。

Element方法的具体实现

第一个参数是节点名（如div），第二个参数是节点的属性（如class），第三个参数是子节点（如ul的li）。除了这三个参数会被保存在对象上外，还保存了key和count。其相当于形成了虚拟DOM树。

有了JS对象后，最终还需要将其映射成真实DOM

根据DOM名调用源生的createElement创建真实DOM，将DOM的属性全都加到这个DOM元素上，如果有子元素继续递归调用创建子元素，并appendChild挂到该DOM元素上。这样就完成了从创建虚拟DOM到将其映射成真实DOM的全部工作。

使用Diff算法

概念：diff算法是一种优化手段，将前后两个模块进行差异化对比，修补（更新）差异的过程叫做patch(打补丁)

virtual DOM和真实DOM的区别

virtual DOM是将真实的 DOM 的数据抽取出来，以对象的形式模拟树形结构，diff算法比较的也是virtual DOM

<div>
  <p>Hello World</p>
</div>
// 转换成虚拟节点 类似于下面这种
const Vnode = {
  tag:'div',
  children:[
    {tag:'p',text:'Hello World'}
  ]
}