vue的diff算法

当数据发生改变时,订阅者watcher就会调用patch给真实的DOM打补丁
通过isSameVnode进行判断,相同则调用patchVnode方法。

patchVnode做了以下操作:

找到对应的真实dom,称为el
1、如果都有都有文本节点且不相等,将el文本节点设置为Vnode的文本节点
2、如果oldVnode有子节点而VNode没有,则删除el子节点
3、如果oldVnode没有子节点而VNode有,则将VNode的子节点真实化后添加到el
4、如果两者都有子节点,则执行updateChildren函数比较子节点

updateChildren主要做了以下操作:

1、设置新旧VNode的头尾指针
2、新旧头尾指针进行比较,循环向中间靠拢,根据情况调用patchVnode进行patch重复流程、3、调用createElem创建一个新节点,从哈希表寻找 key一致的VNode 节点再分情况操作

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 当数据发生变化时,vue是怎么更新节点的? 要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据...
    Marting424阅读 3,311评论 0 0
  • 前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长。也会用到大量的图片以及代码举例,目的让看这篇文...
    flyinskybiu阅读 3,177评论 0 0
  • react diff diff算法的作用:数据更改,生成相应的虚拟DOM,与真实DOM作对比,通过diff算法,对...
    糕糕AA阅读 9,762评论 0 1
  • 当数据发生变化时,vue是怎么更新节点的? 之前,正常用jq等其他库的时候渲染列表都是直接把整个列表数据添加到do...
    橙汁坤阅读 2,875评论 0 0
  • 写在最前:本文转发掘金[https://juejin.cn/post/6994959998283907102]类似...
    没名字的某某人阅读 8,509评论 0 2