VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue 中常见的 defineProps 宏经过 VuReact 编译后会变成什么样的 React 代码？
前置约定
为避免示例代码冗余导致理解偏差，先明确两个小约定：
- 文中 Vue / React 代码均为核心逻辑简写，省略完整组件包裹、无关配置等内容；
- 默认读者已熟悉 Vue 3 中
defineProps的 API 用法与核心行为。
编译对照
Vue defineProps<{ ... }>() → React props 类型 + props 参数
defineProps 是 Vue 3 <script setup> 中用于声明组件输入属性的宏，它既允许类型参数声明，也支持运行时声明形式。VuReact 会将它编译为 React 中的 props 类型声明，并将组件参数改写为 props。
- Vue 代码：
<script setup lang="ts">
const props = defineProps<{ id: string; enabled?: boolean }>();
</script>
- VuReact 编译后 React 代码：
type ICompProps = {
id: string;
enabled?: boolean;
};
const Comp = (props: ICompProps) => {
// ...
};
从示例可以看到：Vue 的 defineProps 并不会直接编译为某个运行时 Hook，而是转换为 React 中标准的 props 类型和组件参数。VuReact 会将 defineProps 中的类型信息提取为独立的 props 类型定义，保持类型安全与 React 组件 Props 规范一致。
Vue defineProps(['foo', 'bar']) / defineProps({ ... }) → React props 推导
除了类型参数形式，defineProps 还支持数组和对象形式的运行时声明。VuReact 会对这些形式进行类型推导，并在可行的情况下将结果映射到 React 的 props 类型。
- Vue 代码：
<script setup>
const props = defineProps(['foo', 'bar']);
</script>
- React 输出（示意）：
type ICompProps = {
foo?: any;
bar?: any;
};
const Comp = (props: ICompProps) => {
// ...
};
若使用对象形式声明，编译器也会尽量保留类型推导。虽然这两种形式可用，但推荐优先使用类型参数形式，因为它在 React 端的类型提示更清晰、结果更可控。
🔗 相关资源
- VuReact 官方文档：vureact.top
- VuReact Runtime 文档：runtime.vureact.top
✨ 如果你觉得本文对你理解 VuReact 有帮助，欢迎点赞、收藏、关注！
