Vue函数式组件在Vue 3中性能优势大幅收敛，不再必选，仅适用于明确无状态、纯展示、高频复用的简单场景，如动态标题、图标包装器、HOC等。
Vue 函数式组件的性能优势主要体现在渲染更快、内存更省、逻辑更轻，但这些优势在 Vue 3 中已大幅收敛——它不再是一种“必选优化手段”，而更适合明确无状态、纯展示、高频复用的简单场景。
渲染开销显著降低
函数式组件跳过了 Vue 实例化全过程：不创建组件实例、不初始化响应式系统、不触发生命周期钩子、不收集依赖（Dep）、不维护 watchEffect 队列。它直接调用 render 函数，输入 props + context，输出 VNode。这意味着：
- 没有
this上下文，无需代理 data、methods、computed 等属性 - 每次更新都全量重渲染，但省去了 diff 前的状态比对和依赖追踪开销
- 在 Vue 2 中，800 个列表项改用函数式组件，脚本执行时间可缩短约 30%
内存占用更小
每个普通 Vue 组件实例平均多占用约 60% 的内存（含响应式对象、watcher、事件总线引用等），而函数式组件仅保留最精简的函数闭包和 props 引用：
- 无 data、无 computed、无 methods，不新建响应式 Proxy 或 Object.defineProperty 代理
- 无 $el、$refs、$parent 等实例属性，不参与组件树管理
- 适合长列表、弹窗浮层、图标标签等大量重复渲染的 UI 元素
适用场景更聚焦，而非泛用
Vue 3 已大幅提升有状态组件性能，且支持多根节点、更优的 diff 算法，因此函数式组件不再是“性能刚需”，而是“语义精准”的选择：
立即学习“前端免费学习笔记（深入）”；
- 动态标题（
<h1>～<h6>）、图标包装器、文字标签等静态结构组件 - 高阶组件（HOC）如
withLoading、withPermission，只做包裹不干预状态 - 条件代理组件，例如根据 type 渲染不同子组件的
ComponentSwitcher
Vue 2 与 Vue 3 的关键差异
写法和底层机制已有明显演进，直接影响性能收益的感知：
- Vue 2：需显式声明
functional: true，通过render(h, context)接收上下文 - Vue 3：移除
functional选项，函数式组件即普通函数：const Comp = (props, context) => h(...) - Vue 3 中 stateful 组件性能接近函数式组件，官方明确建议“优先使用有状态组件”，除非你明确需要无状态语义
