React 视角下的降维打击：彻底看透 Vue 3 生命周期与 Setup 架构

在现代前端开发中，由于 AI 辅助编程的普及，许多开发者在接手或生成 Vue 代码时，经常会看到大量混合了 Vue 2（Options API）和 Vue 3（Composition API）的代码片段。对于习惯了 React 函数式组件和 Hooks 思想的开发者来说，面对 Vue 中繁杂的生命周期钩子（如 beforeCreate、created、beforeMount、mounted 等）往往会感到强烈的认知割裂。

本文旨在抛开 Vue 官方文档中按部就班的词汇堆砌，直接建立 React Hooks 与 Vue 3 <script setup> 之间的心智映射模型。掌握这套映射，你将发现两者在底层组件架构思想上可谓殊途同归。

一、 认知重构：script setup 的本质

在理解具体的生命周期之前，必须先纠正一个由 Vue 2 带来的历史遗留误区：寻找 created 的替代品。

在 React 中，函数式组件的每一次执行，其函数体顶层的代码（声明变量、立即执行的逻辑）都会同步运行。

在 Vue 3 引入 <script setup> 语法糖之后，其底层的设计哲学与 React 函数组件高度对齐：整个 <script setup> 标签内部的顶层作用域，就是组件的初始化阶段。 当组件实例被创建时，引擎会自上而下同步执行这里的代码。

这意味着，在 Vue 3 中，我们不再需要 beforeCreate 和 created。你在 <script setup> 顶层声明响应式变量、调用普通函数的行为，就等同于在执行 created 阶段的逻辑。在这个阶段，数据已经就绪，但真实的 DOM 尚未挂载到文档中。

二、 核心生命周期映射模型

剥离掉边缘的钩子函数，日常业务开发中我们需要掌控的仅仅是组件的“挂载”、“更新”与“销毁”三个核心动作。我们可以通过以下的 Mermaid 映射图，直观地建立 React 与 Vue 3 的联系：

1. 挂载阶段：获取数据与 DOM 操作

业务场景：组件初次渲染到屏幕上时，发起首屏网络请求，或获取真实的 DOM 节点进行第三方库（如 ECharts）的初始化。

• React 思维：使用 useEffect 并传入空数组作为依赖，确保逻辑仅在组件初次挂载后执行一次。
• Vue 3 实现：使用 onMounted 钩子。当该钩子触发时，标志着组件的虚拟 DOM 已经被渲染为真实的物理 DOM，你可以安全地通过 ref 访问 DOM 元素。

2. 更新阶段：精准的状态监听与防御“死循环”

业务场景：当某一个特定的状态（如 URL 带来的 userId）发生变化时，触发相应的业务逻辑（如重新请求用户详情）。

这是 React 开发者转向 Vue 时最容易踩坑的地方。面对“更新”，直觉上可能会寻找 Vue 中的 onUpdated 生命周期。然而在实际业务开发中，**必须极力避免使用 onUpdated**。

onUpdated 关注的是DOM 的重绘。只要组件内有任何响应式数据发生变化导致页面重新渲染，该钩子就会被触发。如果在这个钩子中再次修改状态，极易引发无限渲染的死循环。它通常仅供底层 UI 组件库开发者使用，用于在 DOM 结构重排后读取最新的几何属性。

• React 思维：使用 useEffect 并将特定的变量传入依赖数组 [userId]。
• Vue 3 实现：摒弃生命周期的概念，直接使用 watch 或 watchEffect API。Vue 的响应式系统提供了细粒度的依赖收集，watch 会精确地盯着你指定的响应式引用，只有当它发生改变时，才会执行回调函数。这与 React 带有依赖项的 useEffect 在业务效果上完全一致。

3. 销毁阶段：打扫战场防范内存泄漏

业务场景：用户切换路由或条件渲染导致组件被销毁，此时必须清除组件内遗留的定时器（setInterval）、全局事件监听（window.addEventListener）或未关闭的 WebSocket 连接。

• React 思维：在 useEffect 中返回一个清理函数。
• Vue 3 实现：使用 onUnmounted 钩子。Vue 将清理逻辑从挂载逻辑中抽离成了独立的 API，职责更加单一明确。如果不在此阶段进行资源释放，随着应用的持续运行，游离的引用将阻碍 V8 引擎的垃圾回收，最终导致严重的内存泄漏。

三、 总结

框架的语法 API 千变万化，但前端工程化中组件的运行逻辑是恒定的。

对于 React 开发者而言，理解 Vue 3 的捷径并非从零背诵文档，而是建立概念映射：将 <script setup> 视为组件初始化的入口，用 onMounted 替代挂载期的副作用，用 watch 处理状态驱动的逻辑，用 onUnmounted 完成资源的回收。建立起这套知识锚点，无论框架如何演进，都能迅速看透其底层运转的本质。