学习snabbdom的diff算法
2021-10-25 23:06:15 0 举报
登录查看完整内容
学习snabbdom 如何实现diff算法
作者其他创作
大纲/内容
是
将oldVnode包装为虚拟节点
把oldVnode的elem中的innerText改变为newVnode的text（即使oldVnode有children属性而没有text属性，那么也没事儿，innerText一旦改变为新的text，老children就没了）
什么都不做
oldVnode和newVnode是不是sel和key都相同？
有
没有（意味着oldVnode有text）
是DOM节点
newVode有没有text属性？
相同
暴力删除旧的、插入新的
如果是旧节点先循环完毕，说明新节点中有要插入的节点
不同
四判定还有剩余项
是虚拟节点
不是
①清空oldVnode中的text，②并且把newVnode的children添加到DOM中
newVnode的text和oldVnode是否相同
oldVnode有没有children
oldVnode和newVnode就是内存中的同一个对象？
没有（意味着newVnode有children）
四判定 ① 新前与旧前 ② 新后与旧后 ③ 新后与旧前 （此种情况发生了，涉及移动节点，那么旧前指向的节点，移动到旧后之后）④ 新前与旧后 （此种情况发生了，涉及移动节点， 那么旧后指向的节点，移动到旧前之前）
如果是新节点先循环完毕，如果老节点中还有剩余节点（旧前和新后指针），说明它们要被删除的节点
patch函数被调用
oldVnode是虚拟节点还是DOM节点
最复杂的情况，就是新老Vnode都有children，此时就要进行最优雅的diff
0 条评论
回复 删除
下一页
