vue-虚拟DOM理解
2018-11-06 本文已影响0人
6e5e50574d74
1.性能损耗原理
var box = document.querySelector('.box') ;
console.time('temp')
var num = 1 ;
var _num = 1 ;
box.innerHTML = num ;
for( var i = 0 ; i < 10000 ; i++ ){
var box = document.querySelector('.box') ;
_num ++ ;
box.innerHTML = _num ;
}
console.timeEnd('temp') // 80
console.time('temp')
var num = 0 ;
for( var i = 0 ; i <= 10000 ; i++ ){
++num ;
}
box.innerHTML = num ;
console.timeEnd('temp') //0.8
2.虚拟DOM的使用
<body>
<div class="box">
<div class="content">
<ul class="list">
</ul>
<p>
2
</p>
</div>
</div>
</body>
<script>
1.生成DOM树
var vDom = {
tag:'div',
attr:{
className:'box'
},
content:[
{
tag:'div',
attr:{
className:'content'
},
content:[
{
tag:'ul',
attr:{
className:'list'
}
},
{
tag:'p',
content:2
}
]
}
]
}
2.页面渲染
var data = []
3.改变数据
data.push('zsq')
data.push('zsq')
data.push('zsq')
4.重新生成DOM树
var vDom = {
tag:'div',
attr:{
className:'box'
},
content:[
{
tag:'div',
attr:{
className:'content'
},
content:[
{
tag:'ul',
attr:{
className:'list'
},
content:[
{
tag:'li',
content:'zsq'
},
{
tag:'li',
content:'zsq'
},
{
tag:'li',
content:'zsq'
}
]
},
{
tag:'p',
content:2
}
]
}
]
}
5. 将两次的vDom进行对比，发现有不同的地方
6. 根据（diff算法） 将不同的渲染出来,一样的地方不做任何改变
增强训练查阅diff的用法
1.用来比较两个文本文件之间的差异
$diff<"变动前文本"><"变动后文本">
