我们都知道在前端优化性能一个秘诀就是尽可能少地操作DOM,使用虚拟DOM能更新DOM节点,提升渲染性能。
虚拟的DOM的核心思想:对复杂的文档DOM结构,提供一种方便的工具,使得开发效率得到保证。进行最小化的DOM操作,使得执行效率得到保证。
虚拟dom的框架/工具都是这么做的:
1、根据虚拟dom树最初渲染成这是dom。
2、当数据变化,或者说是页面需要重新渲染的时候,会重新生成一个新的完整的虚拟dom。
3、拿新的虚拟dom来和旧的虚拟dom做对比(使用diff算法),得到需要更新的地方后,更新内容。
什么是虚拟dom?与key值的关系?
Virual DOM是用JS对象记录一个dom节点的副本,当dom发生够改变的时候,先用虚拟dom进行diff,算出最小差异,然后再修改真实dom。
虚拟DOM的Diff算法
1、如果节点类型改变,直接将纠结点卸载,替换为新节点,旧节点包括下面的子节点都将被卸载,如果新节点和旧节点仅仅是类型不同,但下面的所有子节点都一样时,这样做效率也不高。
2、节点类型不变,属性或者属性值改变,不会卸载节点,执行节点更新的操作。
3、文本改变,直接修改文字内容。
4、移动、增加、删除子节点时,如果想在中间插入节点F,做法就是:卸载C,装载F,卸载D,装载C,卸载E,装载D,装载E,如下图:
写代码时,如果没有给数组或枚举类型定义一个key,就会采用上面的算法。如果为元素增加key后,Vue就能根据Key,直接找到具体的位置进行操作,效率较高。如下图:
例子:
没有key:
<div id="app">
<button @click="add">添加</button>
<ul>
<li v-for="item in list">
<input type="checkbox">{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
list:["跑步","跳舞","瑜伽"]
},
methods:{
add(){
this.list.unshift("打球");
}
}
})
</script>
本来选中跑步
点击添加后,变成选中打球
因为没有给元素加key,就会采用先卸载后装载的方法。
如果我们给元素加key,这样每一项都有一个key属性,每一项都有唯一的id。
<div id="app">
<button @click="add">添加</button>
<ul>
<li v-for="item in list" :key="item.id">
<input type="checkbox">{{item.name}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
list:[
{name:"跑步",id:1},
{name:"跳舞",id:2},
{name:"瑜伽",id:3}
]
},
methods:{
add(){
this.list.unshift({name:"打球",id:4});
}
}
})
</script>
本来选中的跑步
点击添加打球,选中的还是跑步