一文看懂：Vue3 watch 用 VuReact 转成 React 长啥样

大家好，我是专注前端框架迁移、编译工具实践的掘金博主～在 Vue3 转 React 的过程中，watch 作为最常用的响应式监听 API，手动改写很容易丢失逻辑、写错依赖。

今天继续用 VuReact 工具，给大家带来 Vue3 watch → React 编译对照，全程一比一还原、保留所有行为与内链，看完直接上手迁移。

---

前言

先明确核心： VuReact 是能将 Vue 3 代码编译为标准、可维护 React 代码的工具 它最大亮点：编译阶段自动分析依赖、自动生成依赖追踪，完美对齐 Vue 响应式监听行为，不用手动处理 React Hooks 依赖。

本文只聚焦一个高频 API： 👉 Vue3 watch → React 等价代码 全程对照，不冗余、直接看核心。

前置约定（避免理解偏差）

为了示例清爽，先统一两点：

1. 只保留核心逻辑，省略组件包裹、无关配置
2. 默认你已熟悉 Vue3 watch 用法与核心行为

一、基础版：watch → useWatch

Vue 标准 watch 监听，支持 immediate、清理函数 onCleanup，VuReact 直接编译为 useWatch。

Vue 源码

<script setup>
import { ref, watch } from 'vue';
const userId = ref(1);

watch(
  userId,
  async (newId, oldId, onCleanup) => {
    let cancelled = false;
    onCleanup(() => {
      cancelled = true;
    });
    const data = await fetchUser(newId);
    if (!cancelled) {
      userData.value = data;
    }
  },
  { immediate: true },
);
</script>

VuReact 编译后 React 代码

import { useVRef, useWatch } from '@vureact/runtime-core';
const userId = useVRef(1);

useWatch(
  userId,
  async (newId, oldId, onCleanup) => {
    let cancelled = false;
    onCleanup(() => {
      cancelled = true;
    });
    const data = await fetchUser(newId);
    if (!cancelled) {
      setUserData(data);
    }
  },
  { immediate: true },
);

核心要点

• Vue watch() 直接编译为 useWatch
• 完全保留：回调参数、immediate、onCleanup 清理机制
• 编译阶段自动分析依赖、深度追踪，无需手动管理依赖数组

二、深度监听 & 多源监听：对象/数组来源兼容

watch 监听对象内部属性、多源数组时，VuReact 同样支持 deep 与多源写法，行为完全对齐 Vue。

Vue 源码（深度监听 + 多源监听）

<script setup>
import { reactive, watch } from 'vue';
const state = reactive({
  info: { name: 'Vureact', version: '1.0' },
  count: 0,
});

// 深度监听对象内部
watch(
  () => state.info,
  (newInfo) => {
    console.log('对象内部变化:', newInfo.name);
  },
  { deep: true },
);

// 多源监听
watch([state.count, () => state.info.name], ([newCount, newName]) => {
  console.log('计数:', newCount, '名称:', newName);
});
</script>

VuReact 编译后 React 代码

import { useReactive, useWatch } from '@vureact/runtime-core';
const state = useReactive({
  info: { name: 'Vureact', version: '1.0' },
  count: 0,
});

useWatch(
  () => state.info,
  (newInfo) => {
    console.log('对象内部变化:', newInfo.name);
  },
  { deep: true },
);

useWatch([state.count, () => state.info.name], ([newCount, newName]) => {
  console.log('计数:', newCount, '名称:', newName);
});

对应关系

• 监听函数写法、deep: true 深度监听完全保留
• 多源数组监听直接兼容
• 编译器自动做依赖分析，不用手动写 deps

三、一句话总结

用 VuReact 做 Vue3 → React 迁移，watch 相关规则：

1. watch → useWatch
2. 支持 immediate / deep / onCleanup 全部选项
3. 支持单源、函数返回值、多源数组监听
4. 依赖自动追踪，无需手动管理依赖数组
5. 行为 1:1 对齐 Vue，迁移零逻辑损耗

相关资源

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

❤️ 觉得有用就 点赞 + 收藏 + 关注，持续更新前端迁移/编译工具实战！