一、为什么需要虚拟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操作解放出来,转移到数据操作上。
原文地址:https://www.cnblogs.com/wpf1913/p/vue-dom.html
时间: 2024-11-06 03:35:21