当前位置：首页 > news >正文

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

news 2026/4/15 6:29:15

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

前置约定

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

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

编译对照

Vue watchEffect() → React useWatchEffect()

watchEffect是 Vue 3 中用于自动响应依赖变化并执行副作用的 API，它会在首次运行后自动收集依赖。VuReact 会将它编译为useWatchEffect，并在编译阶段自动分析 watchEffect 内的依赖，进行精准的深度追踪并收集，无需开发者手动管理依赖。

Vue 代码：

<scriptsetup>import{ref,watchEffect}from'vue';constcount=ref(0);watchEffect(()=>{console.log(`当前计数是:${count.value}`);});</script>

VuReact 编译后 React 代码：

import{useVRef,useWatchEffect}from'@vureact/runtime-core';constcount=useVRef(0);watchEffect(()=>{console.log(`当前计数是:${count.value}`);},[count.value]);

从示例可以看到：Vue 的watchEffect()被翻译为useWatchEffect。VuReact 提供的 useWatchEffect 是watchEffect 的适配 API，完全模拟 Vue watchEffect 的自动依赖收集、清理机制和停止控制。

VuReact 在编译阶段会自动识别watchEffect中的任何响应式依赖来源，并生成对应的 React 依赖数组，无需开发者手动维护。

Vue watchEffect + flush 选项 → React useWatchPostEffect / useWatchSyncEffect

当你需要在 React DOM 更新后执行副作用时，Vue 中的watchEffect可以通过flush: 'post'或flush: 'sync'选项编译为对应的 React 版本，保持与渲染时机的一致性。

Vue 代码：

<scriptsetup>import{ref,watchEffect}from'vue';constwidth=ref(0);constelRef=ref(null);watchEffect(()=>{if(elRef.value){width.value=elRef.value.offsetWidth;}},{flush:'post'},);watchEffect(()=>{// sync 模式用于 React 同步更新场景console.log(elRef.value);},{flush:'sync'},);</script>

VuReact 编译后 React 代码：

import{useRef,useState}from'react';import{useWatchPostEffect,useWatchSyncEffect}from'@vureact/runtime-core';constwidth=useVRef(0);constelRef=useVRef(null);useWatchPostEffect(()=>{if(elRef.value){width.value=elRef.value.offsetWidth;}},[elRef.value,width.value,elRef.value.offsetWidth]);useWatchSyncEffect(()=>{// sync 模式用于 React 同步更新场景console.log(elRef.value);},[elRef.value]);