-
什么是虚拟 dom ?
所谓的虚拟DOM,顾名思义并不是真实的Dom,它其实就是用 JS 来模拟DOM结构,把DOM的变化操作放在JS层来做,尽量减少对DOM的操作。然后对比前后两次的虚拟DOM的变化,只重新渲染变化了的部分,而没有变化的部分则不会重新渲染。前后的两次对比通过 diff 算法进行对比操作, 如下图所示。 -
通过 js 对象模拟DOM树的数据结构
一个真实的DOM
<div id="content">
<p>{{ 1+1}}</p>
<ul class="list-group">
</ul>
</div>
虚拟DOM
//1.内存中生成一颗虚拟dom树
var vDom = {
tag:"div",
attr:{
id:"content"
},
children:[
{tag:"p",content:2},
{tag:"ul",attrs:{className:"list-group"}}
]
}
-
为什么要用虚拟DOM渲染?
处理虚拟DOM的速度比操作真实DOM更快。 -
虚拟DOM操作的流程
<div id="content">
<p>{{ 1+1}}</p>
<ul class="list-group">
</ul>
</div>
<script>
var data = {
arr:[]
}
//1.内存中生成一颗虚拟dom树
var vDom = {
tag:"div",
attr:{
id:"content"
},
children:[
{tag:"p",content:2},
{tag:"ul",attrs:{className:"list-group"}}
]
}
//2.将内存中的虚拟dom树初始化渲染成真实dom树
//3.当我们修改data里面的数据的时候
data.arr.push("<li>111111</li>")
data.arr.push("<li>222222</li>")
//4.将之前的虚拟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"}
]}
]
}
//5.将此次生成好的新的虚拟dom树与上一次的虚拟dom树结构进行对比,对比差异(diff算法)
//6.将对比出来的差异的部分进行重新真实dom结构的渲染
/*
内部当数据变化,生成一颗新的虚拟dom树,与上一次的虚拟dom树结构进行对比。也就是说,当数据变化的时候,
大量操作的是虚拟dom,而虚拟dom属于内存数据,操作起来性能要高的多。而真实的dom操作,只有在追加的那一刻
才会进行操作,大大提升了性能。
*/
</script>