vue中的diff算法

最新推荐文章于 2024-03-16 19:05:03 发布

雾600

最新推荐文章于 2024-03-16 19:05:03 发布

阅读量259

点赞数

文章标签： vue.js 算法 javascript

本文链接：https://blog.csdn.net/weixin_61915741/article/details/122834622

版权

先来一句概念：

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

换句人话

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁

其有两个特点：

diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较

小结

当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
通过isSameVnode进行判断，相同则调用patchVnode方法
patchVnode做了以下操作：
- 找到对应的真实dom，称为el
- 如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
- 如果oldVnode有子节点而VNode没有，则删除el子节点
- 如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
- 如果两者都有子节点，则执行updateChildren函数比较子节点
updateChildren主要做了以下操作：
- 设置新旧VNode的头尾指针
- 新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作

关注