Vue更新子节点整体流程
2020-07-07 11:43:03 0 举报Vuejs 内部patch函数更新子节点整体流程
作者其他创作
大纲/内容
oldEndVnode和newEndVnode是同一个节点？
idxInOld如何获取索引的？
否
如果是新children先被遍历完？
对这两个节点进行 patchVnode操作
是
添加newVnode中剩余的节点到parentElm中
oldStartVnode设置为下一个节点
获取idxInOld
把oldStartVnode移动到oldEndVnode后面
oldEndVnode已经不存在了？(节点被移动走了)
删除oldVnode里没被遍历的剩余节点
将newStartVnode设置为下一个节点
oldStartVnode已经不存在了？(节点被移动走了)
updateChildren
oldStartVnode和newStartVnode是同一个节点？
找不到相同key的节点？
有children 没遍历到？
把找到的这个节点移动到oldStartVnode的前面
使用newStartVnode创建新节点插入到oldStartVnode的前面
这种情况属于相同的key但不是同一个元素使用newStartVnode创建新节点插入到oldStartVnode的前面
索引关系中直接通过key获取索引值
它表示oldVnode.children中与newStartVnode是同一个节点的那个节点的索引值
oldEndVnode设置为前一个节点
建立key和index索引的对立关系
开始
如果是旧children先被遍历完？
在oldChildren中清空找到的节点oldch[idxInOld] = undefined
找到的节点和newStartVnode是同一个节点？
oldStartVnode和newEndVnode是同一个节点？
oldEndVnode设置为下一个子节点newStartVnode设置为前一个子节点
oldStartVnode设置为下一个子节点newEndVnode设置为前一个子节点
把oldEndVnode移动到oldStartVnode后面
循环children用sameVnode方法找到相同的那个节点获取索引值
存在newStartVnode.key？
oldEndVnode和newStartVnode是同一个节点？
收藏
收藏
职业：暂无
0 条评论
下一页
