登录
你的 Vue 3 reactive()，VuReact 会编译成什么样的 React？
2026年4月13日 17:17
VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue 中高频使用的 reactive() 和 shallowReactive()，经过 VuReact 编译后会变成什么样的 React 代码？
前置约定
- 示例只保留核心逻辑，省略完整组件包裹
- 你已熟悉 Vue 3
reactive/shallowReactive用法
一、Vue reactive() → React useReactive()
reactive 是 Vue 3 最核心的对象响应式 API，在 VuReact 中会被精准映射。
基础编译对照
Vue 输入
<script setup>
import { reactive } from 'vue';
const state = reactive({
count: 0,
title: 'VuReact',
});
</script>
VuReact 输出（React）
import { useReactive } from '@vureact/runtime-core';
const state = useReactive({
count: 0,
title: 'VuReact',
});
reactive 直接编译为 useReactive Hook：
- 完全保留 Vue 响应式语义
- 直接修改属性自动触发视图更新
- 深层对象、数组、Map/Set 全部支持
- 和 React 生命周期完美协同
TypeScript 场景：类型完整保留
Vue 输入（TS）
<script lang="ts" setup>
import { reactive } from 'vue';
interface User {
id: number;
name: string;
}
const state = reactive<{
loading: boolean;
users: User[];
config: Record<string, any>;
}>({
loading: false,
users: [],
config: { theme: 'dark' },
});
</script>
VuReact 输出（TS）
import { useReactive } from '@vureact/runtime-core';
interface User {
id: number;
name: string;
}
const state = useReactive<{
loading: boolean;
users: User[];
config: Record<string, any>;
}>({
loading: false,
users: [],
config: { theme: 'dark' },
});
✅ 接口、泛型、类型约束完全迁移
✅ React 侧智能提示、类型检查全部正常
✅ 不用改一行类型逻辑
二、Vue shallowReactive() → React useShallowReactive()
浅层响应式用于性能优化，只监听顶层属性变化，VuReact 同样完美对齐。
基础编译对照
Vue 输入
<script setup>
import { shallowReactive } from 'vue';
const state = shallowReactive({
nested: { count: 0 },
});
</script>
VuReact 输出（React）
import { useShallowReactive } from '@vureact/runtime-core';
const state = useShallowReactive({
nested: { count: 0 },
});
useShallowReactive 行为完全对齐 Vue：
- 修改顶层属性 → 触发更新
- 修改深层嵌套属性 → 不触发更新
- 替换整个对象 → 触发更新
- 适合大型列表、复杂状态、第三方数据等性能场景
总结一句话
- Vue
reactive→ ReactuseReactive - Vue
shallowReactive→ ReactuseShallowReactive - 响应式行为一致
- TypeScript 类型一致
- 开发心智完全一致
用 VuReact，你可以：
- 继续用 Vue 3 舒服的写法
- 直接产出可维护的 React 代码
- 无痛渐进迁移，不用一次性重构
🔗 相关资源
- VuReact 官网：vureact.top
- VuReact Runtime 文档：runtime.vureact.top
