一、当数据发生变化时,vue是怎么更新节点的?
要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实DOM上会引起整个DOM树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个DOM呢?diff算法能够帮助我们。
我们先根据真实DOM生成一颗virtual DOM(虚拟DOM)
,当virtual DOM
某个节点的数据改变后会生成一个新的Vnode
,然后Vnode
和oldVnode
作对比,发现有不一样的地方就直接修改在真实的DOM上,然后使oldVnode
的值为Vnode
。
diff的过程就是调用名为patch
的函数,比较新旧节点,一边比较一边给真实的DOM打补丁。
二、virtual DOM和真实DOM的区别?
//真实DOM
<div>
<p>123</p>
</div>
//虚拟DOM(virtual DOM)
var Vnode = {
tag: 'div',
children: [
{ tag: 'p', text: '123' }
]
};
/**注:VNode和oldVNode都是对象,一定要记住
三、diff的比较方式?
在采取diff算法比较新旧节点的时候,比较只会在同层级进行, 不会跨层级比较。
patch过程会判断新旧两个节点是否值得比较;
如果新旧两个节点一致:比对他们的子节点;如果新旧两个节点不一致:使用新节点替换旧节点。直接替换,不再向下比对。
补充:如果根节点不同,但是子节点完全相同,但是也会被重新渲染,无法重复利用。【diff算法的一个劣势】
四、同级节点比较
同级子节点相当于两个数组比较,取新旧两个数组的头尾作为指针:oldS、oldE、S、E,两两比对会出现以下四种情况:
- oldS = S, oldE = E :这里指的是两个指针向中间移动;
- oldS = E时,将真实DOM第一个节点移动到最后;
- oldE = S时,将真实DOM最后一个节点移动到最前main;
- 如果以上都没有匹配到时,使用S在oldChildren中遍历,如果遍历到,则将真实DOM中对应S的节点移动到第一个,如果没有匹配到,在oldChildren中第一个插入S节点;
两个指针指向中间遍历:如果oldChildrenz先遍历完,将vnode中剩余节点插入到oldChildren中,反之在oldChildren中删除多余的节点。
**注:子节点比较时,如果设置key,使用key进行比较。key是用来辅助判断新旧两个节点在逻辑上是否相同,增加了对于节点的唯一标识。