总览

本章节展示 Vue 代码在 VuReact 下，将被编译为什么样的 React 代码，同时列举当前支持的 API 与语法范围。

为什么是“语义对照”

• 内部实现会演进，文件路径和分层可能变化
• 但“输入语义 -> 输出语义”的规则更稳定
• 对业务开发者来说，最重要的是“我这样写，最后会变成什么？”

如何阅读本章

1. 先看 Vue 输入片段
2. 再看 React 输出片段（简化示意）
3. 关注每组下方的关键说明和约束

说明：示例为典型输出，最终代码以本地编译产物为准。

三条核心判断标准

1. 语义尽量等价：尽可能保持原有业务行为
2. 可分析优先：输入必须能被静态分析
3. 遵守 React 规则：输出要满足 Hook 与组件约束

一个高频细节

Vue 模板里使用 ref / computed 等，通常不写 .value，但生成后的 React 代码里，VuReact 会自动补为 .value 访问。这是模板表达式转换中的默认行为，用于保持语义一致并保证输出可运行。

能力矩阵

本章节给出当前能力边界，用于评估项目是否适配 VuReact。

判定口径

• 支持：主路径稳定可用
• 部分支持：可用，但有约束、降级或额外改造
• 不支持：当前无法保证正确转换

模块级矩阵

领域	状态	你需要关注什么
模板	支持	自定义指令受限、动态属性名表达式可能告警或降级
脚本/单独文件	支持	如 ref / watch / 生命周期 等 API 会转为 React hook ，顶层规则严格
样式/单独文件	支持	在 SFC 中单 style + scoped/module 可用，多 style/cssVars 受限
Vue 路由	支持	语法和API有适配

场景适配矩阵

场景	适配度	建议
新旧项目按约定开发	高	推荐优先采用
渐进式迁移（分模块）	高	按约定先试点、再扩圈
复杂旧项目一次性迁移	低	不建议作为首选方案
不使用 <script setup>	低	建议使用现代 Vue 语法
对 Vue 2 使用	无	完全不建议