snabbdom中的patchVnode思路分析

127 阅读1分钟
  • 使用方式:patchVnode(oldVnode,vnode,insertedVnodeQueue)
  • 作用:对比新旧两个vnode节点,找到差异,更新到真实DOM上

主要分为三个部分

一、对比新旧两个vnode前触发的钩子函数

prepatch、update

二、对比新旧两个vnode节点

1、新节点有text属性,且不等于旧节点的text属性
    如果老节点有children,先移除老节点的children对象的DOM元素,再设置新节点对应#### DOM元素的textContent
2、新老节点是否都要children,且不相等
    调用updateChildren()对比新旧两个节点的子节点,并且更新子节点的差异
3、只有新节点有children属性
    如果老节点有text属性,清空对应DOM元素的textContent,
    添加所有的子节点
4、只有老节点有children属性
    移除所有的老节点
5、只有老节点有textshux
    清空对应DOM元素的textContent

三、对比新旧两个vnode节点后触发的钩子函数

postpatch