Vue.js函数式组件不支持响应式绑定，因其无实例、无状态、不参与Observer/Watcher流程；Vue 3已移除该特性，推荐用普通组件、组合式函数或渲染函数替代。
Vue.js 的响应式原理本身不直接支持“函数式组件”中的响应式绑定，因为函数式组件在 Vue 2 和 Vue 3 中本质不同——它没有实例、没有状态、不参与响应式系统的核心流程（如 Observer、Watcher、Dep 收集），因此不能像常规组件那样自动触发依赖追踪和视图更新。
函数式组件不具备响应式上下文
函数式组件是无状态、无实例的纯渲染函数，接收 props、context（slots、attrs、emit 等）作为参数，返回 VNode。它不会创建 vm 实例，也不执行 initData、observe 或 watcher 初始化流程。这意味着：
- 内部定义的局部变量（包括通过
ref或reactive创建的）不会被自动纳入响应式系统 - 即使使用
setup()+defineComponent({ functional: true })（Vue 3 中已废弃该写法），也不会激活响应式代理或依赖收集 - props 是只读的（Proxy 代理后不可赋值），但 props 本身的变更仍能触发函数式组件重新调用——这是靠父组件响应式更新驱动的，而非函数式组件自身响应
绑定行为依赖父级响应式驱动
函数式组件中所谓的“绑定”，实际是父组件数据变化 → 触发父组件重渲染 → 重新调用函数式组件函数 → 生成新 VNode。例如：
const MyFunctional = defineComponent({
props: ['msg'],
setup(props) {
// 这里无法使用 ref/reactive 建立响应式状态
// props.msg 是响应式来源，但仅限于读取
return () => h('div', props.msg)
}
})
当父组件修改 msg 时，MyFunctional 被再次执行，但不是因为它监听了 msg，而是因为父组件的响应式依赖通知了整个子树更新。
Wjs Localizing Video
下载
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
立即学习“前端免费学习笔记（深入）”；
Vue 3 中函数式组件已被移除，推荐替代方案
Vue 3.0+ 正式移除了 functional 选项，官方不再支持函数式组件语法。若需类似轻量、无状态的封装，应使用：
-
普通组件 +
defineComponent+ 无 data/state：可安全使用ref/computed，且完全兼容响应式系统 -
组合式函数（composable）：将逻辑抽离为可复用的响应式逻辑单元，配合
setup使用 -
渲染函数（render function）：在有状态组件内使用
h()手动构造 VNode，既保持灵活性，又保有响应式能力
特别注意：v-model 在函数式组件中无效
由于函数式组件没有实例，无法触发 $emit('update:xxx') 或解析 v-model 语法糖。尝试在函数式组件上使用 v-model 将静默失败或报错（Vue 2 报 warning，Vue 3 直接忽略）。必须显式透传 prop + 事件，例如：
<CustomInput :modelValue="value" @update:modelValue="val => value = val" />
而 CustomInput 必须是常规组件，否则事件无法被响应式系统捕获和转发。
