上述函数是在模板编译成ast之后调用的生成VNode的函数，所以有patchFlag这个标志，如果是动态的节点，并且此时是开启了Block的话，就会将节点塞入Block中，这样 createBlock返回的 VNode 中就会有 dynamicChildren 了。
到此为止，通过本文中案例经过模板编译和render函数运行后并经过了优化以后生成了如下结构的vnode：
const result = { type: Symbol(Fragment), patchFlag: 64, children: [ { type: 'span', patchFlag: -1, ...}, { type: 'ul', patchFlag: 0, children: [ { type: 'li', patchFlag: -1, ...}, { type: Symbol(Fragment), children: [ { type: 'li', patchFlag: 1 ...}, { type: 'li', patchFlag: 1 ...} ] } ] } ], dynamicChildren: [ { type: Symbol(Fragment), patchFlag: 128, children: [ { type: 'li', patchFlag: 1 ...}, { type: 'li', patchFlag: 1 ...} ] } ] }
以上的 result 不完整，但是我们暂时只关心这些属性。可以看见 result.children 的第一个元素是span，patchFlag=-1，且 result 有一个 dynamicChildren 数组，里面只包含了两个动态的 li，后续如果变动了数据，那么新的 vnode.dynamicChildren 会有第三个 li 元素。
patch
patch部分其实也没差多少，就是根据vnode的type执行不同的patch操作：
function patchElement(n1, n2) { let { dynamicChildren } = n2 // 一系列操作 if (dynamicChildren) { patchBlockChildren ( n1.dynamicChildren!, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG ) } else if (!optimized) { // full diff patchChildren( n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG ) } }
可以看见，如果有了 dynamicChildren 那么vue2.x版本中的diff操作就被替换成了 patchBlockChildren() 且参数只有 dynamicChildren，就是静态的不做diff操作了，而如果vue-next的patch中没有 dynamicChildren，则进行完整的diff操作，入注释写的 full diff 的后续代码。
结尾
本文没有深入讲解代码的实现层面，一是因为自己实力不济还在阅读源码当中，二是我个人认为阅读源码不可钻牛角尖，从大局入眼，再徐徐图之，先明白了各个部分的作用后带着思考去阅读源码能收获到的应该更多一些。
到此这篇关于详解Vue3中对VDOM的改进的文章就介绍到这了,更多相关Vue3 VDOM内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: