Vue核心之虚拟DOM

一、为什么需要虚拟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操作解放出来,转移到数据操作上。

相关推荐