Vue的虚拟dom
我们需要带着几个问题思考着来虚拟dom!!!
1. 什么是dom?
2. 什么是虚拟dom?虚拟dom有什么作用和好处?
什么是dom?
在html中dom其实就是节点,即就是html各种的标签在JavaScript中的最大特性其实就是dom节点的操作,但是我们在每每操作dom的时候都往往的消耗电脑的性能,所以在这个问题上Vue的虚拟dom就已经解决。
什么是虚拟dom?
就是JavaScript的内存对象。Vue的虚拟dom是通过diff算法尽可能的最大限度的通过DOM树渲染出最真实的html页面,从而减少性能的消耗。
Vue在页面加载的时候先建立一个虚拟DOM树对真是的DOM进行密切追踪。
虚拟DOM树需要先解析CSS样式和DOM树,让后整个成一个完整的DOM树,最后在通过Vue底层基础代码来完整的渲染在html页面上
前面说了虚拟DOM是一个JavaScript内存对象,对象是通过地址的地址的形式保存在内存中,因此减少对电脑内存的消耗,从而达到性能优化的目的。
虚拟DOM如何尽可能的最大限度的通过DOM树渲染出最真实的html页面?
- 页面加载的时候先渲染一个虚拟DOM树(旧DOM树)
- 当数据变化,或者说是页面需要重新渲染的时候,会重新生成一个新的完整的虚拟dom
- 拿新的虚拟dom来和旧的虚拟dom做对比(使用diff算法)。得到需要更新的地方之后,更新内容
每当页面的DOM结构、数据等发生变化的时候,旧虚拟DOM和新的虚拟DOM通过diff算法先进行同级对比,而不是从重新渲染,当同级DOM结构数据发生变化的时候,前面相同的DOM结构不需要重新渲染,而是通过内存的形式保存了下来,后面的从同级的不同DOM结构开始重新绘制,重新渲染DOM树,从而渲染出一个新的DOM
最后在上图大概模拟了一下Vue的虚拟DOM的存在形式
举个例子下面是html 的DOM结构
<div id="content">
<p>{{ 1+1}}</p>
<ul class="list-group">
</ul>
</div>
虚拟DOM组成的DOM树大概是这个样子的
//1.初始化的时候内存中生成一颗虚拟dom树
var vDom = {
tag:"div",
attr:{
id:"content"
},
children:[
{tag:"p",content:2},
{tag:"ul",attrs:{className:"list-group"}}
]
}
每当我们数据发生了改变,比如向ul里面插入两个li标签,就会重新的形成一颗新的虚拟DOM树,然后新的和旧的通过diff算法进行对比,将对比出来的差异部分进行真是的DOM 渲染(注意:不是全部进行虚拟DOM重新渲染,而是将对比来的差异部分进行真的DOM结构渲染)
//新的虚拟DOM树
var newDom = {
tag:"div",
attr:{
id:"content"
},
children:[
{tag:"p",content:2},
{tag:"ul",attrs:{className:"list-group"},children:[
{tag:"li",content:"11111"},
{tag:"li",content:"22222"}
]}
]
}
最后的html结果
<div id="content">
<p>{{ 1+1}}</p>
<ul class="list-group">
<li>11111</li>
<li>22222</li>
</ul>
</div>
2020.3.23---------------------------------------------------------------------------昵称:@我托铁