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

VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的编译工具，并非运行时混合框架。今天我们直接看核心：Vue 高频使用的 ref() / shallowRef()，经过 VuReact 编译后会对应 React 的哪些代码？

前置约定

1. 文中 Vue/React 代码均为核心逻辑简写，省略完整组件与冗余结构
2. 你已熟悉 Vue 3 ref、shallowRef 的用法与行为

一、Vue ref() → React useVRef()

ref 是 Vue 3 最基础的响应式 API，在 VuReact 中会被直接编译为 React Hook。

基础编译对照

Vue 输入

<script setup>
  import { ref } from 'vue';
  const count = ref(0);
</script>

VuReact 输出（React）

import { useVRef } from '@vureact/runtime-core';
const count = useVRef(0);

ref 会被编译成 useVRef，它是 Vue ref 在 React 里的语义完全对齐的适配 API，保留 .value 访问与响应式更新行为。

带 TypeScript 类型场景

Vue 输入（TS）

<script lang="ts" setup>
  const title = ref<string>('');
  const isLoading = ref<boolean>(false);
  const userList = ref<Array<{ id: number; name: string }>>([]);
  const config = ref<Record<string, any>>({ theme: 'dark' });
</script>

VuReact 输出（TS）

const title = useVRef<string>('');
const isLoading = useVRef<boolean>(false);
const userList = useVRef<Array<{ id: number; name: string }>>([]);
const config = useVRef<Record<string, any>>({ theme: 'dark' });

TS 泛型、类型注解完整保留，React 侧类型提示完全可用。

二、Vue shallowRef() → React useShallowVRef()

shallowRef 是浅层响应式 API，只顶层引用变化，适合大对象性能优化。

基础编译对照

Vue 输入

<script setup>
  import { shallowRef } from 'vue';
  const count = shallowRef({ a: { b: 1, c: { d: 2 } } });
</script>

VuReact 输出（React）

import { useShallowVRef } from '@vureact/runtime-core';
const count = useShallowVRef({ a: { b: 1, c: { d: 2 } } });

useShallowVRef 完全对齐 shallowRef 行为：

• 修改嵌套属性 → 不触发更新
• 直接替换 .value → 触发更新

相关资源

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