Vue3 的 setup 函数执行时机与上下文原理

题目描述
Vue3 的 setup 函数是 Composition API 的核心，它负责初始化组件的响应式数据、计算属性、方法等。面试官可能会问：setup 函数的执行时机是在组件生命周期的哪个阶段？它的参数（props 和 context）是如何被注入的？为什么在 setup 中无法访问 this？

1. setup 函数的执行时机

步骤解析

1. 组件实例创建阶段

   • 在 Vue3 中，组件实例（instance）通过 createComponentInstance 函数创建，此时实例的属性和方法（如 props、slots）还处于未初始化状态。
   • 紧接着会调用 setupComponent 函数，其中关键一步是执行 setupStatefulComponent 逻辑，用于处理有状态的组件（非函数式组件）。

2. 执行 setup 函数

   • 在 setupStatefulComponent 中，会判断组件配置中是否存在 setup 函数。若存在，则调用 callWithErrorHandling 执行它。
   • 执行时机早于生命周期钩子：此时组件的 data、computed 等选项尚未被处理，甚至模板的渲染函数也未被调用（即早于 beforeCreate 和 created 钩子）。

3. 与生命周期钩子的顺序

   // 伪代码逻辑
   const instance = createComponentInstance(...);
   setupComponent(instance);
     → setupStatefulComponent(instance);
       → const setupResult = callWithErrorHandling(setup, ...); // 执行 setup
     → applyOptions(instance); // 处理 data、computed 等选项
       → callHook(instance, 'beforeCreate'); // 此时才触发 beforeCreate
   

   因此，setup 的执行在 beforeCreate 之前，但组件实例已创建完毕（只是未初始化选项）。

2. setup 的参数与上下文注入

步骤解析

1. 参数来源

   • setup 函数接收两个参数：props 和 context。
   • props 是响应式对象，由 instance.props 提供。在调用 setup 前，会通过 initProps 完成 props 的解析和响应式化（使用 shallowReactive）。
   • context 包含三个属性：
     • attrs：非响应式对象，通过 instance.attrs 注入（对应未在 props 中声明的属性）。
     • slots：非响应式对象，通过 instance.slots 注入。
     • emit：事件触发函数，通过 instance.emit 绑定到当前实例。

2. 上下文对象的生成逻辑

   // 伪代码
   const setupContext = {
     attrs: instance.attrs,
     slots: instance.slots,
     emit: instance.emit,
   };
   const setupResult = callWithErrorHandling(
     setup, 
     instance, 
     [instance.props, setupContext] // 作为参数传入
   );
   

   • 注意：attrs 和 slots 是非响应式的，但它们的值会随组件更新而变化，需通过 onUpdated 钩子观察变化。

3. 为什么 setup 中无法访问 this？

步骤解析

1. 组件实例未完全暴露

   • 执行 setup 时，组件实例（instance）虽已创建，但许多选项（如 data、methods）尚未挂载到实例上。此时若暴露 this，其行为将不一致且易引发错误。

2. 设计意图

   • Vue3 明确将 setup 设计为纯函数逻辑的入口，避免 this 的隐式依赖，提升 TypeScript 类型推断和代码可维护性。
   • 若需访问实例属性（如根节点 $el），应通过生命周期钩子（如 onMounted）或模板引用（ref）实现。

3. 替代方案

   • 通过 getCurrentInstance() 可获取当前实例，但仅推荐在高级场景（如库开发）中使用，因为实例的内部属性可能在不同版本中变化。

总结

• setup 在组件实例创建后、选项初始化前执行，早于 beforeCreate 钩子。
• 参数 props 是响应式的，context 提供非响应式的上下文工具。
• 避免使用 this 是出于设计一致性考虑，逻辑应通过函数参数和组合式 API 实现。