【vue diff算法】

如果标签名不同就直接删掉,如果key值和标签名相同就认为是同一个结点。继续深度比较

patch函数,页面第一次将虚拟结点渲染成真实结点的时候调用一次(container,VNode),在新Vnode替换旧Vnode再调用一次
patch函数首先判断传入的是不是Vnode类型,因为第一次渲染传的是dom元素(container容器),如果不是就会创建空的VNode并关联dom元素。
否则就会执行sameVnode判断是不是同一个节点,sameVNode主要根据key和标签名判断。相同就执行patchVnode进行更新,不相同就创建新的dom,插入,删掉旧的dom。

patchVnode函数首先会对新旧Vnode进行比较,如果相同就直接return了,不相同的话,如果

  • 新vnode有children,旧的也有children,执行updatechildren更新
  • 新vnode有children,旧的有text,删除text添加children
  • 新vnode有text,旧的有text,更新text
  • 新vnode有text,旧的有children,添加text,删除children PS:children 和 text 是互斥的,不会同时存在。

updatechildren函数 首尾指针法

  • 老的children开始和新的children开始
  • 老的结束和新的结束
  • 老开始和新结束
  • 老结束和新开始
    如果比较下来还没有相同的(sameVnode进行判断),就去用新vnode的key值去就旧children去找有没有符合的,还没有的话就创造新的元素。如果有相同的就进行patchVnode进行更新。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值