如果标签名不同就直接删掉,如果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进行更新。