登录你的 Vue 3 生命周期，VuReact 会编译成什么样的 React？
VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue 中常见的生命周期钩子经过 VuReact 编译后会变成什么样的 React 代码？
前置约定
为避免示例代码冗余导致理解偏差，先明确两个小约定：
- 文中 Vue / React 代码均为核心逻辑简写，省略完整组件包裹、无关配置等内容；
- 默认读者已熟悉 Vue 3 中生命周期钩子例如
onMounted、onBeforeMount、onUpdated、onBeforeUpdate、onBeforeUnmount、onUnmounted的 API 用法与核心行为。
编译对照
Vue onMounted() → React useMounted()
onMounted 是 Vue 3 中用于组件首次挂载后执行逻辑的生命周期钩子，适合放初始化请求、订阅启动、DOM 相关准备等操作。VuReact 会将它编译为 useMounted，让 React 端也能在组件挂载后执行一次性副作用。
- Vue 代码：
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
console.log('组件已挂载');
});
</script>
- VuReact 编译后 React 代码：
import { useMounted } from '@vureact/runtime-core';
useMounted(() => {
console.log('组件已挂载');
});
从示例可以看到：Vue 的 onMounted() 被翻译为 useMounted。VuReact 提供的 useMounted 是 onMounted 的适配 API，完全模拟 Vue onMounted 的首次挂载后执行时机。
Vue onBeforeMount() → React useBeforeMount()
onBeforeMount 是 Vue 3 中用于组件挂载前执行逻辑的钩子，适合放需要在布局阶段之前准备的内容。VuReact 会将它编译为 useBeforeMount，基于 React 的布局效果在挂载前执行。
- Vue 代码：
<script setup>
import { onBeforeMount } from 'vue';
onBeforeMount(() => {
console.log('组件即将挂载');
});
</script>
- VuReact 编译后 React 代码：
import { useBeforeMount } from '@vureact/runtime-core';
useBeforeMount(() => {
console.log('组件即将挂载');
});
VuReact 提供的 useBeforeMount 是 onBeforeMount 的适配 API，完全模拟 Vue onBeforeMount 的首次挂载前时机。
Vue onBeforeUpdate() → React useBeforeUpdate()
onBeforeUpdate 是 Vue 3 中用于跳过首次挂载，仅在组件更新前执行的钩子，适合放变更前校验、记录旧值、提前准备等逻辑。VuReact 会将它编译为 useBeforeUpdate，并支持依赖数组以控制触发时机。
- Vue 代码：
<script setup>
import { reactive, onBeforeUpdate } from 'vue';
const state = reactive({ count: 0 });
onBeforeUpdate(() => {
console.log('更新前，当前 count:', state.count);
});
</script>
- VuReact 编译后 React 代码：
import { useReactive, useBeforeUpdate } from '@vureact/runtime-core';
const state = useReactive({ count: 0 });
useBeforeUpdate(
() => {
console.log('更新前，当前 count:', state.count);
},
[state.count],
);
从示例可以看到：Vue 的 onBeforeUpdate() 被翻译为 useBeforeUpdate。VuReact 提供的 useBeforeUpdate 是 onBeforeUpdate 的适配 API，完全模拟 Vue onBeforeUpdate 的更新前触发时机。当 React 对应 API 需要依赖数组时，deps 数组可用于只在指定值变化时触发，VuReact 会在编译阶段自动分析依赖并映射到对应依赖数组，避免开发者手动管理依赖。
Vue onUpdated() → React useUpdated()
onUpdated 是 Vue 3 中用于组件更新后执行逻辑的钩子，适合放读取最新渲染结果、执行后续同步等操作。VuReact 会将它编译为 useUpdated，并支持可选依赖数组来精确控制触发条件。
- Vue 代码：
<script setup>
import { reactive, onUpdated } from 'vue';
const state = reactive({ count: 0 });
onUpdated(() => {
console.log('组件更新后，count:', state.count);
});
</script>
- VuReact 编译后 React 代码：
import { useReactive, useUpdated } from '@vureact/runtime-core';
const state = useReactive({ count: 0 });
useUpdated(
() => {
console.log('组件更新后，count:', state.count);
},
[state.count],
);
VuReact 提供的 useUpdated 是 onUpdated 的适配 API，完全模拟 Vue onUpdated 的更新后执行时机。如果 React API 使用 deps 数组，VuReact 会自动分析依赖并生成对应的数组，无需开发者手动维护依赖。
Vue onBeforeUnmount() → React useBeforeUnMount()
onBeforeUnmount 是 Vue 3 中用于组件卸载前执行的钩子，适合放动画停止、资源解绑、日志上报等清理前逻辑。VuReact 会将它编译为 useBeforeUnMount，在卸载前执行。
- Vue 代码：
<script setup>
import { onBeforeUnmount } from 'vue';
onBeforeUnmount(() => {
console.log('组件即将卸载');
});
</script>
- VuReact 编译后 React 代码：
import { useBeforeUnMount } from '@vureact/runtime-core';
useBeforeUnMount(() => {
console.log('组件即将卸载');
});
VuReact 提供的 useBeforeUnMount 是 onBeforeUnmount 的适配 API，完全模拟 Vue onBeforeUnmount 的卸载前时机。
Vue onUnmounted() → React useUnmounted()
onUnmounted 是 Vue 3 中用于组件卸载时执行逻辑的钩子，适合放最终资源释放、异步取消、上报日志等收尾逻辑。VuReact 会将它编译为 useUnmounted，在组件卸载时执行。
- Vue 代码：
<script setup>
import { onUnmounted } from 'vue';
onUnmounted(() => {
console.log('组件已卸载');
});
</script>
- VuReact 编译后 React 代码：
import { useUnmounted } from '@vureact/runtime-core';
useUnmounted(() => {
console.log('组件已卸载');
});
VuReact 提供的 useUnmounted 是 onUnmounted 的适配 API，完全模拟 Vue onUnmounted 的卸载时机。
🔗 相关资源
- VuReact 官方文档：vureact.top
- VuReact Runtime 文档：runtime.vureact.top
✨ 如果你觉得本文对你理解 VuReact 有帮助，欢迎点赞、收藏、关注！
