Vue核心之虚拟DOM

标签：性能   jin   oci   了解   问题   修改   lov   解决   开发者   

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化。

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。

比如，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。

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

 <div class=‘test‘ id=‘div1‘>
        <p>100</p>
        <span>呵呵</span> 
    </div>
  
  
 obj={
    tag:‘div‘,
    className:‘test‘,
    id：“div1”，
    children:[
      {
        tag:‘p‘,
        text:100
      }，
      {
        tag：’span‘,
        text:‘呵呵‘
      }
    ]
  }

Vue核心之虚拟DOM

标签：性能   jin   oci   了解   问题   修改   lov   解决   开发者   

原文地址：https://www.cnblogs.com/wpf1913/p/vue-dom.html