Fragment之vue和react

在 Vue 3 中,Fragment(碎片)的引入确实解决了 “组件必须有唯一根节点” 的限制,允许组件直接返回多个同级子节点,这与 React 的 Fragment 理念一致,但实现细节和设计背景有其特殊性
这是因为 Vue 2 的虚拟 DOM(VNode)设计要求组件必须有一个单一的根节点作为渲染入口,否则无法处理组件的更新逻辑(如 diff 算法、事件绑定等)。
而 Vue 3 重构了虚拟 DOM 系统,引入 Fragment 作为一种特殊的 VNode 类型(Symbol(Fragment)),它允许组件返回多个同级子节点,这些节点会被包裹在一个 “隐形” 的 Fragment 容器中,但最终渲染到 DOM 时,Fragment 本身不会生成任何实际的 DOM 节点,仅作为逻辑上的分组容器。
与 React Fragment 的异同
相同点:两者都不生成实际 DOM 节点,仅作为多节点的逻辑容器,解决单根节点限制。
不同点:
Vue 3 的 Fragment 是 “隐式” 的,组件模板中直接写多个节点即可,无需显式使用标签(当然也可以通过

posted @ 2025-08-07 15:59  jialiangzai  阅读(16)  评论(0)    收藏  举报