Vue 转 React：toRaw()，VuReact 怎么处理？

M ? A2026-04-29 8:08

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

前置约定

为避免示例代码冗余导致理解偏差，先明确两个小约定：

文中 Vue / React 代码均为核心逻辑简写，省略完整组件包裹、无关配置等内容；
默认读者已熟悉 Vue 3 中 toRaw 的 API 用法与核心行为。

编译对照

Vue toRaw() → React useToRaw()

toRaw 是 Vue 3 中用于获取响应式对象原始非响应式引用的 API，通常用于调试、序列化或与非响应式库交互时。VuReact 会将它编译为 useToRaw，让 React 端也能安全地读取原始数据对象。

Vue 代码：

html 复制代码

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

  const state = reactive({
    settings: {
      theme: 'dark',
      notifications: true,
    },
  });

  const rawData = toRaw(state);
</script>

VuReact 编译后 React 代码：

ts 复制代码

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

const state = useReactive({
  settings: {
    theme: 'dark',
    notifications: true,
  },
});

const rawData = useToRaw(state);

VuReact 提供的 useToRaw 是 toRaw 的适配 API ，可理解为「React 版的 Vue toRaw」，完全模拟 Vue toRaw 的语义------它返回的是原始对象引用，且该对象不再具有响应性，修改它不会触发视图更新。

🔗 相关资源

VuReact 官方文档：https://vureact.top
VuReact Runtime 文档：https://runtime.vureact.top

📖 继续阅读

✨ 如果你觉得本文对你理解 VuReact 有帮助，欢迎点赞、收藏、关注！