Vue核心之虚拟DOM

Posted 2020-11-27 wpf1913

一、为什么需要虚拟DOM？

 

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

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

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

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

 

二、虚拟DOM，有什么好处?

DOM操作是制约效率的关键

减少DOM操作，修改内存中的数据（变量）消耗的资源远远小于DOM操作

虚拟DOM就是一个内存中的一个对象，该对象有一个特点和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:‘呵呵‘
      }
    ]
  }

 

三、小结

1. Vue运行效率高，采用虚拟DOM，减少真实DOM的操作使项目的运行效率大大提高

2. Vue开发效率高，采用组件化开发

本质上：将开发者的精力从DOM操作解放出来，转移到数据操作上。