简单解释:
本质来说:Virtual DOM是一个JavaScript对象,通过对象的方式来表示DOM结构.
将页面的状态抽象为JS对象的形式,配合不同的渲染工具,使跨平台成为了可能.
通过事务处理的机制,将多次DOM的修改结果一次性的更新到页面上,从而有效的
减少页面的渲染次数,减少修改DOM的重绘重排次数,提高渲染的性能.
更本质解释:
虚拟DOM是对DOM的抽象,这个对象是更加的轻量级的DOM的描述.它设计的最初的
目的,就是为了更好的跨平台.举个例子,Node就没有DOM,想要实现SSR,那个一个
方式就是借助虚拟DOM,因为虚拟的DOM本省就是JS对象.在代码渲染到页面之前,
vue或者React会把代码转换成一个对象(虚拟DOM).以对象的形式来描述真实DOM
结构,最终渲染到页面.在每次数据发生变化前,虚拟DOM就会缓存一份,变化之前,
现在的虚拟DOM会与缓存的虚拟DOM进行比较.
在Vue或React中内部封装了diff算法,通过这个算法来进行比较,渲染时修改
改变的变化,原先没有发生变化的通过原先数据进行渲染.
最重要的一点,前端的框架的一个基本要求就是无需手动操纵DOM,一方面时
因为手动操作DOM无法保证程序性能,多人协作的项目中如果review不严格,
可能会有开发者写出性能较低的代码,另一方面更重要的是省略手动操作DOM
可以大大的提高开发的效率.