vue 虚拟节点diff过程
2021-03-05 16:42:23 5 举报vue 虚拟节点diff过程
作者其他创作
大纲/内容
那就将这个dom变成虚拟节点
跟传入进来的参数二是不是同一个节点
是同一个节点
如果经过上面四轮的比较如果还有没有匹配的项
进行精细化比较
文本节点跟旧的节点的文本是不是一样
暴力删除旧的节点，插入新的节点
插入项要插入到新后+1指向的那个项的前面newCh[newEndIndex + 1].elm;
不是
是虚拟节点
（如果是新后旧前命中，那么旧要移动节点，将旧前指向的项移动到旧后之后
是
新老节点都有children，此时旧要进行diff算法进行子节点更新操作：diff算法提供四种命中方式：1、新前与旧前比较2、新后与旧后比较3、新后与旧前比较4、新前与旧后比较
否
如果是旧节点先循环完毕，就说明有新的节点要插入项
删除是删除旧前跟旧后之间的所有项
如果是新前旧后命中，那么就要移动节点，移动旧后指向的这个节点到旧前指向节点的前面
调用patch函数
判断一下第一个参数是不是虚拟节点
旧的节点是否有文本节点
将旧节点中的文本清空，然后将新的节点添加到到DOM节点中
什么都不做
新的节点是不是有文本节点
将新节点的文本innerText到dom节点中
如果是新的节点先循环完毕，就说明旧的节点有要删除的项
不是同一个节点
收藏
0 条评论
下一页
