Vue面试题25：Vue组件为什么只能有一个根节点？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 回答思路

  • 给一条自己的结论
  • 解释为什么会这样
  • vue3解决方法原理

• 范例

  • vue2中组件确实只能有一个根，写多根会报错，但vue3中组件已经可以多根节点了；
  • 之所以需要这样是因为vdom是一颗单根树形结构，patch 方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也会转换为一个vdom，自然应该满足这个要求；
  • vue3中之所以可以写多个根节点，是因为引入了Fragment的概念，这是一个抽象的节点，如果发现组件是多根的，就创建一个Fragment节点，把多个根节点作为它的children。将来patch的时候，如果发现是一个Fragment节点，则直接遍历children创建或更新。