函数式组件是无状态、无实例、仅依赖props输入返回VNode的纯函数式UI单元；它不维护响应式数据、无生命周期钩子、无this上下文，不参与Vue响应式系统，适用于动态标签、列表项、高阶包装及纯展示场景。

函数式组件（Functional Component）是一种不维护自身状态、不创建组件实例、仅靠输入（props）决定输出（渲染结果）的纯函数式 UI 单元。

它没有这些

• 没有 data、computed、watch 等响应式数据
• 没有 生命周期钩子（如 mounted、updated）
• 没有 this 上下文，无法访问实例属性或方法
• 不触发依赖追踪，不参与 Vue 的响应式系统

它只做这一件事

接收 props 和 context（含 slots、attrs、emit 等），返回一个虚拟节点（VNode）。例如：

Vue 3 写法（推荐）：

import { h } from 'vue'<br>export default (props, { slots, attrs }) => {<br>  return h('div', { class: 'card', ...attrs }, [<br>    h('h3', props.title),<br>    slots.default && slots.default()<br>  ])<br>}

三种常见写法对比

• 组合式 API 函数写法：最简洁，适合独立文件导出，直接用 h() 构建 VNode
• 单文件组件（SFC）模板写法：Vue 3 中无需 functional: true 标记，只要没声明 setup 或响应式逻辑，默认就是轻量函数式行为（但注意：带 setup 就不是函数式了）
• 选项式 API（Vue 2 风格）：需显式设置 functional: true，已不推荐用于新项目

适合用在哪

• 动态标签组件（如 标题）
• 列表项渲染（大量 ，无交互、无状态）
• 包装型高阶组件（如 withLoading、withErrorBoundary）
• 纯展示卡片、图标、文案容器等无副作用场景