千锋逆战班,Rayson.Jin学习打卡!
今天给大家介绍一下虚拟dom和diff算法。
一、虚拟dom是什么
1.它是一个Object对象模型,用来模拟真实dom节点的结构
(虚拟dom其实是里面内存型对象(js内存对象) 属于内存数据 真实dom的一层映射)
2.提供一种方便的工具,使得开发效率得到保证
3.保证最小化的DOM操作,使得执行效率得到保证
二、虚拟dom的使用基本流程(前四步骤)
1.获取数据
2.创建vdom
3.将vdom渲染成真实dom
4.数据更改了
5.使用diff算法比对两次vdom,将之前的虚拟dom树结合新的数据生成一颗新的虚拟dom树
6.根据key将patch对象渲染到页面中改变的结构上,而其他没有改变的地方是不做任何修改的( 虚拟dom的惰性原则 )
//1.获取数据
var data = {
arr:[]
}
//2.内存中生成一颗虚拟dom树,创建vdom <div id="content"><p>2</p><ul class="list-group"></ul></div>
var vDom = {
tag:"div",
attr:{
id:"content"
},
children:[
{tag:"p",content:2},
{tag:"ul",attrs:{className:"list-group"}}
]
}
//3.将内存中的虚拟dom树初始化渲染成真实dom树
//4.更改数据
data.arr.push("<li>111</li>")
data.arr.push("<li>222</li>")
//5.使用diff算法比对两次vdom,将之前的虚拟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"}
]}
]
}
//6.将对比出来的差异的部分进行重新真实dom结构的渲染
三、diff算法是什么
用来做比对两次vdom结构
四、diff算法运行结束后,返回key
<div id='box'>
<ul>
<li v-for = '(item,index) in list' :key = 'item.id'>
<p>{{item.text}}</p>
<div>
<button @click = 'changeStyle'>修改</button>
<button @click = 'remove(index)'>删除</button>
</div>
</li>
</ul>
</div>
<script>
//id为
new Vue({
el:'#app',
data:{
list:[{
id:1,
text:'敲代码1'
},
{
id:2,
text:'敲代码2'
}
]
},
methods:{
changeStyle(e){
//接下来写的是为了给大家看key的作用,这段代码不要出现
e.target.parentNode.parentNode.style.background = 'red'
//删除以后会有上一层的样式
},
remove(index){
this.list.splice(index,1)
}
}
})
</script>
注意:vue是一个mvvm框架,Vue高性能的原因之一就是vdom