虚拟dom树
什么是虚拟DOM
虚拟DOM不是真实的DOM,而是一个JS对象。它的作用是判断DOM是否改变、哪些部分需要被重新渲染。这样,不需要操纵真实的DOM,提高了性能。
<div id="content">
<p>{{ 1+1}}</p>
<ul class="list-group">
</ul>
</div>
//在vue内部的话,其实有虚拟dom
//虚拟dom其实是里面内存型对象(js内存对象) 属于内存数据 真实dom的一层映射
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做对比(使用diff算法)。得到需要更新的地方之后,更新内容
这样的话,就能大量减少真实dom的操作,提高性能
虚拟DOM的Diff算法
1.如果节点类型改变,直接将旧节点卸载,替换为新节点,旧节点包括下面的子节点都将被卸载,如果新节点和旧节点仅仅是类型不同,但下面的所有子节点都一样时,这样做也是效率不高的一个地方。
2.节点类型不变,属性或者属性值改变,不会卸载节点,执行节点更新的操作。
3.文本改变,直接修改文字内容。
4.移动,增加,删除子节点时:
如果想在中间插入节点F,简单粗暴的做法是:卸载C,装载F,卸载D,装载C,卸载E,装载D,装载E。如下图:
写代码时,如果没有给数组或枚举类型定义一个key,就会采用上面的粗暴算法。
如果为元素增加key后,Vue就能根据key,直接找到具体的位置进行操作,效率比较高。如下图:
举例子
<div id="app">
<div>
<button @click="add">添加</button>
</div>
<ul>
<li v-for="item in list">
<input type="checkbox"> {{item}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: ["苹果", "香蕉", "橘子"]
},
methods: {
add() {
// unshift()方法可向数组的开头添加一个或更多元素
this.list.unshift("核桃");
}
}
});
</script>
比如本来选中的是"苹果":
但是添加了"核桃"之后,选中的就变成"核桃"了:
这是因为没有给元素添加key属性,从而在渲染的时候采用的是上面提到的简单粗暴的做法。
当给元素添加了key属性之后,就不会出现这样的问题了。要注意为每项提供一个具有唯一值的 key 属性。理想的 key 值是每项都有的唯一 id:
<div id="app">
<div>
<button @click="add">添加</button>
</div>
<ul>
<li v-for="(item,index) in list" :key="item.id">
<input type="checkbox"> {{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: [
{name: "苹果", id: 1},
{name: "香蕉", id: 2},
{name: "橘子", id: 3}
]
},
methods: {
add() {
// unshift()方法可向数组的开头添加一个或更多元素
this.list.unshift({name:"核桃",id:4});
}
}
});
</script>
点击在数组前面添加了"核桃"之后,选中的仍然是"苹果":