虚拟dom(VNode),假的,不是真实的dom

真实的DOM在浏览器通过dom.api操作的,复杂的对象

虚拟DOM:可以通过this.$slots.default查看

真实的dom是一个对象,它的属性非常多,在浏览器中做dom操作,会比较消耗性能

虚拟dom是一个对象,它的属性相比较于真实的dom就比较少---用少量的属性描述一个dom,无法在浏览器中直接显示

 

真实的DOM

image

虚拟DOM

image

为什么在vue中会用到虚拟dom?

有两点好处:

1.虚拟dom比真实dom体积小,操作是相对来说消耗性能少,如果在页面中删除一个dom,会引起重绘,影响后边元素的布局

1):虚拟Dom不会进行回流和重绘操作

2):虚拟dom进行频繁的修改,然后一次性比较并修改真实DOM中需要改的部分,最后并在真实DOM中进行回流和重绘,减少过多DOM节点的回流和重绘

3)真实Dom频繁的回流和重绘效率非常低

 

 

2.虚拟dom可能跨端(在服务器端也可以使用vue技术),跨平台,如果直接操作真实的dom,则与浏览器强制绑定在一起,vue就是去更多的可能

vue怎么使用虚拟dom

image

 

Logo

前往低代码交流专区

更多推荐