Vue中的diff算法
概念:diff算法是一种优化手段,将前后两个模块进行差异化对比,修补(更新)差异的过程叫做patch(打补丁)
为什么vue,react这些框架中都会有diff算法呢,我们都知道真实dom的开销是很大的,这个跟性能优化中的重绘意义类似。某些时候我们修改了页面中的某个数据,如果直接渲染到真实DOM中会引起整棵树的重绘,那么我们能不能只让我们改变过的数据映射到真实 DOM,做一个最少的重绘呢,这就是diff算法要解决的事情。
virtual DOM和真实DOM的区别
virtual DOM是将真实的 DOM 的数据抽取出来,以对象的形式模拟树形结构,diff算法比较的也是virtual DOM
代码理解
<div>
<p>Hello World</p>
</div>
// 转换成虚拟节点 类似于下面这种
const Vnode = {
tag:'div',
children:[
{tag:'p',text:'Hello World'}
]
}
diff是如何比较的?
概括起来就是对操作前后的dom树同一层的节点进行对比,一层一层对比,然后再插入真实的dom中,重新渲染
vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,那么 key是如何更高效的更新虚拟DOM的呢
我们看下面的例子
我们希望可以在B和C之间加一个F,diff算法默认执行起来是这样的:即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?
所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
image
网友评论