你的 Vue 3 reactive()，VuReact 会编译成什么样的 React？

VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue 中高频使用的 reactive() 和 shallowReactive()，经过 VuReact 编译后会变成什么样的 React 代码？

前置约定

1. 示例只保留核心逻辑，省略完整组件包裹
2. 你已熟悉 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 → React useReactive
• Vue shallowReactive → React useShallowReactive
• 响应式行为一致
• TypeScript 类型一致
• 开发心智完全一致

用 VuReact，你可以：

• 继续用 Vue 3 舒服的写法
• 直接产出可维护的 React 代码
• 无痛渐进迁移，不用一次性重构

🔗 相关资源

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