Vue 3 中函数式组件性能优势弱化，仅适用于无状态、纯展示、高频复用场景；它跳过实例创建与响应式系统，直接渲染VNode，内存占用更低，但官方推荐优先使用有状态组件。
Vue 函数式组件的性能优势在 Vue 3 中已明显弱化，不再作为通用优化手段，而是聚焦于特定场景下的轻量表达——它快，但快得有前提；省资源，但只在无状态、纯展示、高频复用时才真正体现价值。
渲染过程更直接
函数式组件不创建 Vue 实例，跳过响应式系统初始化、依赖收集（Dep）、watchEffect 队列管理、生命周期钩子调用等环节。它接收 props 和 context 后，直接调用 render 函数生成 VNode：
- 没有 this 上下文，不代理 data、computed、methods 等属性
- 不维护 $el、$refs、$parent 等实例属性，也不参与组件树追踪
- 每次更新都是全量重渲染，但省去了 diff 前的状态比对和依赖追踪开销
内存占用显著更低
普通组件实例平均多占用约 60% 内存（含响应式 Proxy、Watcher、事件引用等），而函数式组件仅保留函数闭包 + props 引用：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 无 data、无 computed、无 methods，不新建响应式对象
- 不持有 $options、$watch、$emit 等运行时能力
- 适合长列表项、图标标签、弹窗浮层等大量重复渲染的 UI 元素
适用场景高度明确
Vue 3 已大幅提升有状态组件性能，官方明确建议“优先使用有状态组件”，函数式组件只在语义精准时选用：
立即学习“前端免费学习笔记（深入）”；
- 动态标题封装（h1～h6 包装器）
- 图标组件、文字标签等结构固定、无交互的纯展示单元
- 高阶包装逻辑（如 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 中有状态组件性能接近函数式组件，性能差距大幅收敛
