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

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

前置约定

示例只保留核心逻辑，省略完整组件包裹
你已熟悉 Vue 3 reactive / shallowReactive 用法

一、Vue reactive() → React useReactive()

reactive 是 Vue 3 最核心的对象响应式 API，在 VuReact 中会被精准映射。

基础编译对照

Vue 输入

html 复制代码

<script setup>
  import { reactive } from 'vue';

  const state = reactive({
    count: 0,
    title: 'VuReact',
  });
</script>

VuReact 输出（React）

tsx 复制代码

import { useReactive } from '@vureact/runtime-core';

const state = useReactive({
  count: 0,
  title: 'VuReact',
});

reactive 直接编译为 useReactive Hook：

完全保留 Vue 响应式语义
直接修改属性自动触发视图更新
深层对象、数组、Map/Set 全部支持
和 React 生命周期完美协同

TypeScript 场景：类型完整保留

Vue 输入（TS）

html 复制代码

<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）

tsx 复制代码

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 输入

html 复制代码

<script setup>
  import { shallowReactive } from 'vue';

  const state = shallowReactive({
    nested: { count: 0 },
  });
</script>

VuReact 输出（React）

tsx 复制代码

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