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

大家好，我是专注前端框架迁移、编译工具实践的掘金博主～最近很多同学在做 Vue3 → React 技术栈迁移，被响应式 API 对齐、依赖手动管理搞得头大，尤其是 watchEffect 这种自动依赖收集的核心 API，在 React 里很容易漏写依赖。

今天就用 VuReact 这个编译工具，直接把 Vue3 watchEffect 的各种用法一比一翻译成标准可维护的 React 代码，全程对照、看完即用。

---

前言

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

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

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

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

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

一、基础版：watchEffect → useWatchEffect

Vue 最常用的基础 watchEffect，自动收集依赖、自动触发副作用。

Vue 源码

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

watchEffect(() => {
  console.log(`当前计数是: ${count.value}`);
});
</script>

VuReact 编译后 React 代码

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

useWatchEffect(() => {
  console.log(`当前计数是: ${count.value}`);
}, [count.value]);

核心要点

• Vue watchEffect() 直接编译为 useWatchEffect
• 编译阶段自动分析依赖并生成精准依赖数组，无需手动管理
• 完全模拟 Vue watchEffect 的自动依赖收集、清理机制、停止控制

---

二、带 flush 选项：post / sync 对齐渲染时机

Vue 中通过 flush: 'post' / flush: 'sync' 控制执行时机，VuReact 直接映射为专用 Hook，保持渲染时机一致。

Vue 源码（post + sync）

<script setup>
import { ref, watchEffect } from 'vue';
const width = ref(0);
const elRef = ref(null);

// DOM 更新后执行
watchEffect(
  () => {
    if (elRef.value) {
      width.value = elRef.value.offsetWidth;
    }
  },
  { flush: 'post' },
);

// 同步立即执行
watchEffect(
  () => {
    console.log(elRef.value);
  },
  { flush: 'sync' },
);
</script>

VuReact 编译后 React 代码

import { useVRef } from '@vureact/runtime-core';
import { useWatchPostEffect, useWatchSyncEffect } from '@vureact/runtime-core';

const width = useVRef(0);
const elRef = useVRef(null);

useWatchPostEffect(
  () => {
    if (elRef.value) {
      width.value = elRef.value.offsetWidth;
    }
  },
  [elRef.value, width.value, elRef.value.offsetWidth]
);

useWatchSyncEffect(
  () => {
    console.log(elRef.value);
  },
  [elRef.value]
);

对应关系

• flush: 'post' → useWatchPostEffect
• flush: 'sync' → useWatchSyncEffect
• 执行时机、依赖追踪、副作用行为完全对齐 Vue
• 依赖数组依旧自动生成，无需手动编写

三、一句话总结

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

1. watchEffect → useWatchEffect
2. flush: 'post' → useWatchPostEffect
3. flush: 'sync' → useWatchSyncEffect
4. 依赖自动收集、deps 自动生成，不用手动维护
5. 行为 1:1 对齐 Vue，迁移成本极低

相关资源

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

互动一下

你在 Vue 转 React 时，最头疼哪个 API？ watch / computed / defineProps / defineEmits？ 评论区留言，下期直接出对照编译手册～

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