一文看懂：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 等价代码 全程对照，不冗余、直接看核心。

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

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

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

一、基础版：watchEffect → useWatchEffect

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

Vue 源码

html 复制代码

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

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

VuReact 编译后 React 代码

ts 复制代码

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）

html 复制代码

<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 代码

ts 复制代码

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 相关规则：

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