Vue3 setup函数原理与最佳实践详解

1. setup 函数在 Vue3 中的核心地位

Vue3 的组合式 API 彻底改变了我们编写组件的方式，而 setup 函数正是这个新范式的核心枢纽。作为从选项式 API 迁移过来的老手，我最初对这个函数也充满疑惑——它究竟在什么时机执行？参数如何传递？返回值如何处理？经过多次源码调试和实际项目验证，现在我可以系统地分享这些经验。

在组件实例化过程中，setup 的执行时机非常靠前，具体是在 props 初始化之后、任何其他选项（如 data、methods）处理之前。这个设计非常巧妙，它确保了我们可以最早接触到组件的 props 和上下文，为后续的状态初始化提供基础。实际编码中，我经常利用这个特性来做一些前置校验：

javascript复制setup(props) {
  // 早期props验证
  if (!props.userId) {
    throw new Error('userId prop is required')
  }
  // ...其他逻辑
}

2. setup 函数的执行流程解析

2.1 从组件挂载到 setup 调用

整个执行链路始于组件的挂载过程。当 Vue 开始处理组件时，runtime-core 中的 setupStatefulComponent 函数成为关键入口。这个函数主要完成三件事：

1. 创建组件代理（instance.proxy）
2. 检查并执行 setup 函数
3. 处理 setup 的返回结果

在调试源码时，我发现一个容易忽略的细节：即使没有显式定义 setup 函数，Vue 也会走同样的流程，只是会跳过执行步骤。这种一致性设计让内部处理逻辑更加清晰。

2.2 参数注入机制

setup 接收的两个参数 props 和 context 都是经过特殊处理的。props 会被包裹在只读代理中，这种设计既保持了响应性，又防止了意外修改：

javascript复制const propsProxy = new Proxy(props, {
  set() {
    warn(`Attempting to mutate prop...`)
    return false
  }
})

而 context 对象则是通过 createSetup