Vue 3 defineOptions 宏，用 VuReact 编译成 React 长什么样？

VuReact 是一个语义感知、约定驱动、支持渐进迁移的编译器，能把 Vue 3 代码一键转成标准可维护的 React 18+ 代码。

今天我们继续拆解核心 API：Vue 3 <script setup> 里的 defineOptions 宏，经过 VuReact 编译后在 React 中如何呈现？

前置约定

为了示例清爽、理解无歧义，先统一两个规则：

1. 只保留核心逻辑，省略外层包裹与无关配置；
2. 默认你已熟悉 Vue 3 defineOptions 的用法与语义。

编译对照：Vue defineOptions → React

1. Vue defineOptions({ name }) → React 组件命名

defineOptions 是 Vue 3 用于组件额外配置的宏，最常用就是指定组件 name。 在 React 中没有完全对应的宏，VuReact 会把 name 直接映射为组件函数名，保持语义一致。

Vue 代码

<script setup lang="ts">
  defineOptions({
    name: 'MyComponent'
  })
</script>

VuReact 编译后 React 代码

const MyComponent = () => {
  return <></>
}

export default MyComponent

defineOptions({ name }) 不会生成任何运行时 Hook，仅作为编译期信息，用来给 React 组件“起名字”，让 DevTools、调用栈保持和 Vue 一致。

2. Vue defineOptions 其他配置 → React 忽略/编译提示

defineOptions 还支持 inheritAttrs、customOptions 等配置。 由于 React 组件机制与 Vue 不同，无法直接映射，VuReact 会做保守处理：

• inheritAttrs：React 无对应概念，直接忽略
• customOptions：非标准配置，忽略并可在编译期提示
• 其他扩展选项：统一忽略

Vue 代码

<script setup lang="ts">
  defineOptions({
    name: 'MyComponent',
    inheritAttrs: false
  })
</script>

VuReact 编译后 React 代码

const MyComponent = () => {
  return <></>
}

export default MyComponent
// inheritAttrs 在 React 中无直接对应，已忽略

这样处理的好处：不向 React 注入无用运行时代码，保持产物干净、符合 React 最佳实践。

3. 最佳实践：用 @vr-name 显式指定组件名

如果你希望100% 保留组件名语义，推荐使用 VuReact 官方推荐的注释约定：

<script setup lang="ts">
// @vr-name: MyComponent
</script>

编译后会稳定生成对应名称的 React 组件，比 defineOptions({ name }) 更可靠、更符合编译约定。

核心总结

• defineOptions({ name }) → 编译为 React 组件名，无运行时开销
• inheritAttrs 等 → React 无对应，直接安全忽略
• 推荐用 // @vr-name: 组件名 替代，更稳定、更标准

VuReact 始终遵循：保留语义、不造多余运行时、符合 React 规范。

相关资源

• VuReact 官方文档：vureact.top
• VuReact Runtime 文档：runtime.vureact.top

对你有帮助的话，欢迎 点赞 + 收藏 + 关注，持续更新 VuReact 编译原理实战～