VuReact 1.10.0：Vue 迁移 React 时，withDefaults 不再是编译盲区

VuReact 在 7 月 1 日发布了 v1.10.0。这个版本的重点不在“多支持一个语法”这么简单，而是补上了 Vue 3 <script setup> 迁移 React 时一个很常见的断点：withDefaults。同时，它也修复了配合 unplugin-auto-import 这类免 import 插件时 API 识别不稳定的问题，并让编译流程提示更清楚。

如果你正在把 Vue 组件逐步迁移到 React，v1.10.0 值得尽快纳入验证范围，尤其是项目里大量使用 defineProps、withDefaults 和自动导入插件的情况。

withDefaults 为什么会影响迁移质量

在 Vue 3 的 <script setup> 中，defineProps 负责声明 props 类型，而 withDefaults 负责给这些 props 提供默认值。很多业务组件会这样写：

<script setup lang="ts">
interface Props {
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
  label?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  disabled: false,
  label: '提交'
})
</script>

<template>
  <button :disabled="props.disabled" :class="`btn-${props.size}`">
    {{ props.label }}
  </button>
</template>

迁移到 React 时，默认值不是装饰信息，而是组件运行语义的一部分。如果编译器只识别 defineProps，却忽略 withDefaults，迁移后就可能出现：

• React 组件 props 类型存在，但默认值丢失；
• 可选 props 在运行时变成 undefined；
• 样式 class、开关状态、展示文案等行为和 Vue 版本不一致；
• 需要人工回填默认值，迁移成本上升。

VuReact 1.10.0 新增 withDefaults 编译支持，解决的正是这类“看起来能编译，运行后细节偏掉”的问题。

自动导入插件下的 API 识别更稳

不少 Vue 项目会使用 unplugin-auto-import 等插件，把 ref、computed、watch、defineProps 等 API 从显式 import 中解放出来。开发体验很好，但对迁移编译器来说会增加判断难度：源码里没有 import 语句，编译器需要正确识别这些 API 的来源和语义。

v1.10.0 修复了使用免 import 插件时的 API 识别问题。这对真实项目很关键，因为大型 Vue 代码库往往不是“教科书式源码”：

// 很多项目里你可能看不到这类显式导入
// import { computed, ref } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

如果迁移工具在这里误判，后续生成的 React state、memo 或 effect 代码就会偏离原逻辑。这个修复意味着 VuReact 在面对现代 Vue 工程化配置时更接近真实生产环境。

可以这样验证：准备一个最小迁移样例

下面的例子可以用来验证 withDefaults 相关迁移结果。命令中的 VuReact CLI 名称和参数请以你项目实际安装方式为准；如果你的团队已经把 VuReact 接入到脚本或 CI 中，可以直接把这个组件加入测试样例集。

先创建一个 Vue 组件：

mkdir -p vureact-check/src
cat > vureact-check/src/SubmitButton.vue <<'EOF'
<script setup lang="ts">
interface Props {
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
  label?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  disabled: false,
  label: '提交'
})
</script>

<template>
  <button :disabled="props.disabled" :class="`btn-${props.size}`">
    {{ props.label }}
  </button>
</template>
EOF

然后运行你的 VuReact 编译流程。下面是一个可改造的示例脚本：

# 假设项目中已经安装并配置 VuReact
# 请把命令替换为你团队实际使用的 CLI 或 npm script
npx vureact ./vureact-check/src/SubmitButton.vue --out-dir ./vureact-check/out

你需要重点检查生成的 React 代码是否保留默认值语义。一个合理的 React 写法通常会接近下面这样：

type Props = {
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
  label?: string
}

export default function SubmitButton({
  size = 'medium',
  disabled = false,
  label = '提交'
}: Props) {
  return (
    <button disabled={disabled} className={`btn-${size}`}>
      {label}
    </button>
  )
}

这段 React 代码不一定是 VuReact 的精确输出格式，但它体现了迁移时必须保留的核心语义：可选 props 的默认值应该进入 React 组件参数解构、默认 props 处理或等价逻辑中。

把 1.10.0 放进迁移流水线时要看什么

升级编译器版本时，不建议只跑一次全量转换就合并。更稳妥的方式是挑选几类组件做回归：

# 可以先搜出使用 withDefaults 的组件，建立迁移验证清单
grep -R "withDefaults" ./src --include='*.vue'

# 如果项目依赖自动导入，也建议检查相关配置
find . -maxdepth 3 \( -name 'vite.config.*' -o -name 'webpack.config.*' -o -name 'unplugin-auto-import*' \)

建议重点覆盖这些场景：

• withDefaults(defineProps<T>(), defaults) 的常规类型写法；
• 默认值里包含字符串、布尔值、数组、对象或函数的组件；
• 不显式 import Vue API、依赖 unplugin-auto-import 的组件；
• props 默认值会影响 class、disabled、条件渲染、表单初始值的组件；
• 编译提示中出现 warning 或 fallback 的文件。

采用建议：让编译器处理重复劳动，把语义审查留给人

VuReact 1.10.0 的价值在于减少 Vue 到 React 迁移中的人工补洞：withDefaults 这类宏语法被正确识别后，迁移结果更容易保持运行行为一致；自动导入场景的 API 识别修复，也让它更适合进入真实工程。

但迁移工具依然不能替代代码审查。建议把它放在“批量转换 + 单测/快照 + 人工审查”的流程里：编译器负责搬运结构和常见语义，工程师负责确认交互、边界状态和组件 API 是否符合 React 项目的长期设计。