Vue源码学习-Diff

2021-07-29  本文已影响0人  wo不是黄蓉

总的来说-深度优先同级比较。

旧节点的startIndex>旧的endIndex时说明遍历结束,此时可以知道需要在那个元素的后天进行添加和删除元素。

旧节点的startIndex=旧节点的endIndex时说明当前节点被删除了

说明:如果是文本节点的更新,可以在patch算法中进行处理,如果判断当前节点没有文本节点则继续判断该节点是否包含child如果包含child则继续执行updateChild方法进行下一级的比较,如果有文本则判断文本内容是否相同,如果不相同则执行节点的操作方法setTextContent更新文本内容。

删除节点时:

如果判断旧的vnode中有新的元素,但是新的里面当前位置的元素是其他的说明该节点是被修改得,执行nodeOpts.setTextContent方法修改就的dom中的节点改变的内容。

循环结束的条件,当vnode.chilren没有值并且newvnode.children没有值时说明已经到最低层了,开始一下个节点的遍历

第一次新的开始节点是从0开始,旧的开始节点也是从0开始,当什么时候idx++?

如果旧节点的child!=新节点的child就执行更新updateChild方法,查找是哪个节点需要更新

如果旧的开始节点=旧的结束节点或者旧的开始节点<旧的结束节点

删除节点的时候不会直接进行删除,先会修改当前遍历的节点

当新的开始节点和旧的结束节点以及新的结束节点和旧的结束节点相同时不需要操作dom

sameVnode判断key是否相同,并且标签名相同;comment相同

添加节点时:

遍历整个元素树从上到下,对比每一层的元素的子元素,以确定需要添加的节点,如果开始节点大于结束节点说明遍历结束,判断新的vnode的next是否存在,如果返回null则说明没有需要增加的节点,否则将next添加到后面当前父元素的后面

删除节点时:

遍历整个元素树从上到下,对比每一层的元素的子元素,如果是从第一个元素进行删除,那么会将新的vnode和旧的vnode进行对比,对比到只有text文本内容的时候,如果该节点没有文本内容则判断是否存在child,判定child不相等时则执行updatechild方法更新元素,否则更新节点的文本内容,因此我们会先看到文本节点更新后的值,但是删除位置后面的元素此时还没有删除。知道执行到旧的开始节点小于或者等于旧的结束节点时此时说明此时有节点需要删除则执行removeVnodes方法删除节点。

上一篇下一篇

猜你喜欢

热点阅读