从源码角度解析Vue重排与重绘

本文探讨了Vue如何通过数据绑定实现视图更新,并详细解析了Vue的diff算法。在patch过程中,Vue比较新旧Vnode,判断是否为同一DOM节点以决定执行适当的更新操作。diff算法采用递归,但其时间复杂度为O(n),确保高效地更新DOM。
摘要由CSDN通过智能技术生成

众所周知,Vue通过数据绑定来修改视图,当某个数据被修改的时候,set方法会让闭包中的Dep调用notify通知所有订阅者WatcherWatcher通过get方法执行vm._update(...),进而去更新视图。

vm._update(...)中,Vue会调用patch(...)(vdom/patch.js第659行左右),将新产生的vnode与数据未变更之前的旧的prevVnode进行对比。

patch(...)方法中,Vue通过sameVnode(...)(vdom/patch.js第42行左右)对新旧两个Vnode对象进行比较,通过比对它们的标签名(tag)、键值(key)、是否都拥有data选项(isDef(data))以及是否都为注释节点(isComment)来确定这两个Vnode映射的真实DOM节点为同一个。只有确定它们是同一个真实DOM节点的不同映射时,才会执行下一步patchVnode(...)(vdom/patch.js第501行左右)。

patchVnode(...)中,Vue会依据新旧两个Vnode对象是否拥有子节点children执行不同的DOM操作,当两个Vnode对象都有子节点时,会调用updateChildren(...)(vdom/patc

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值