Vue3支持多个根节点,通过Fragment来实现,原理比较容易
- 我们用一个Fragment容器来渲染多个节点
首先,在runtime-core模块中的vnode.ts里文件里新加一个类型Fragment
那么我在调runtime-core中的render函数渲染h方法处理过的虚拟节点时,类型就可能是个Fragment
回到我们runtime-core里的renderer.ts文件,在我们调用render方法时,又会走到patch方法里,我们之前的文章有讲过,走到patch方法里时,如果老的虚拟节点不存在,那么就是创建操作,否则就走更新流程
- 在patch里我们增加一个Fragment类型的判断
- 命中Fragment类型后,我们写一个processFragment方法来进行处理
processFragment
- 如果老的虚拟节点为null,那么我们就把新虚拟节点里的children挂载到容器中
- 否则我们就对比新老虚拟节点的children,走的是diff算法
总结:
Fragment的原理比较简单,其实底层就是新增加了一个类型,用一个函数去处理初始挂载或diff更新。如果看了我之前的文章,这里应该非常好理解。其实没做什么特别的事情