vue3中Fragment的实现

693 阅读1分钟

Vue3支持多个根节点,通过Fragment来实现,原理比较容易

  • 我们用一个Fragment容器来渲染多个节点

首先,在runtime-core模块中的vnode.ts里文件里新加一个类型Fragment

image.png

那么我在调runtime-core中的render函数渲染h方法处理过的虚拟节点时,类型就可能是个Fragment

image.png

回到我们runtime-core里的renderer.ts文件,在我们调用render方法时,又会走到patch方法里,我们之前的文章有讲过,走到patch方法里时,如果老的虚拟节点不存在,那么就是创建操作,否则就走更新流程

image.png

  • 在patch里我们增加一个Fragment类型的判断
  • 命中Fragment类型后,我们写一个processFragment方法来进行处理

processFragment

image.png

  • 如果老的虚拟节点为null,那么我们就把新虚拟节点里的children挂载到容器中
  • 否则我们就对比新老虚拟节点的children,走的是diff算法

总结:

Fragment的原理比较简单,其实底层就是新增加了一个类型,用一个函数去处理初始挂载或diff更新。如果看了我之前的文章,这里应该非常好理解。其实没做什么特别的事情