函数式组件通过 context.props 显式接收 props，不支持响应式绑定、v-model 和自定义事件；需父组件传入回调函数，适用于纯展示型静态节点，Vue 3 中已废弃。

Vue.js 中函数式组件（Functional Components）本身不支持 props 的响应式绑定，但可以通过 props 参数显式接收并使用。它没有实例、不维护状态、不触发生命周期，因此通信方式更“扁平”，性能也更轻量——但需注意传递方式和潜在陷阱。

函数式组件如何接收 Props

函数式组件是一个纯函数，接收两个参数：h（创建 VNode 的函数）和 context（上下文对象），其中 context.props 就是父组件传入的 props：

• 必须在组件定义时显式声明 functional: true
• props 不会自动解构，需通过 context.props.xxx 访问
• 不支持 v-model、.sync 或自定义事件监听（因为无实例），事件需由父组件显式传入回调函数作为 prop

Props 传递的典型写法示例

比如一个渲染按钮的函数式组件：

Button.vue（函数式）

export default {
  functional: true,
  props: {
    text: { type: String, default: 'Click me' },
    onClick: { type: Function }
  },
  render(h, { props }) {
    return h('button', {
      on: { click: props.onClick }
    }, props.text)
  }
}

父组件调用时，props 仍按常规方式传入，但子组件内部不会建立响应式依赖追踪。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

性能表现优势与限制

函数式组件因无实例开销、无响应式系统介入、无 watcher 创建，在大量渲染场景（如列表项、图标组件）中确实更快更省内存：

• 跳过 Vue 实例初始化、data 响应化、computed/watch 设置等步骤
• 每次渲染都是全新计算，无缓存或脏检查，适合纯展示型、输入即输出的场景
• 但若 props 中包含大型对象或频繁更新的响应式数据，且组件内做了深度遍历或复杂计算，反而可能因缺少缓存而变慢
• Vue 3 中函数式组件已被废弃（Composition API + 普通 setup 组件已覆盖其优势），Vue 2 项目中建议仅用于明确的性能敏感静态节点

替代方案与现代实践建议

在 Vue 2 后期及 Vue 3 中，更推荐以下方式替代函数式组件实现高性能通信：

• 使用 setup() + defineComponent 编写轻量组件，配合 toRefs 或 shallowRef 控制响应性粒度
• 对纯渲染逻辑，可提取为独立的 render 函数 或 JSX 工具函数，在普通组件中调用
• 利用 v-memo（Vue 3.2+）对子树做条件缓存，兼顾灵活性与性能

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！