★ ★ ★ ★ ★

setup 函数在组件生命周期的哪个阶段执行？

⚡ 速记答案（30 秒）

执行时机：组件实例创建后、beforeCreate 和 created 之间（实际上取代了它们）。此时 props 已解析，但没有可用的 this。

📖 详细讲解

标准面试回答（推荐记住）

setup 函数在组件实例创建后、beforeCreate 和 created 钩子之间执行，实际上它取代了这两个钩子。此时 props 已经解析完成，但没有 this 上下文，只能通过 setup(props, ctx) 的参数来访问 props 和组件上下文。

生命周期对比

Option API	Composition API	说明
beforeCreate	setup()	实例创建前
created	setup()	实例创建完成
beforeMount	onBeforeMount	挂载前
mounted	onMounted	挂载完成
beforeUpdate	onBeforeUpdate	更新前
updated	onUpdated	更新完成
beforeUnmount	onBeforeUnmount	卸载前 (Vue 3 新增)
unmounted	onUnmounted	卸载完成

为什么 setup 中没有 this？

因为 setup 执行时，组件实例尚未完全创建完成（虽然 props 已解析），data、computed、methods 等选项尚未处理。为了避免误用，Vue 刻意不绑定 this。

获取上下文：
使用 setup(props, context) 的第二个参数 context：

context.attrs (非响应式对象，等同于 $attrs)
context.slots (非响应式对象，等同于 $slots)
context.emit (等同于 $emit)
context.expose (暴露公共属性)

✅ 面试要点

•明确 setup 的执行时机
•理解为什么没有 this
•知道如何通过参数获取 props 和 context

💻 代码示例

setup 执行时机

<script setup>
import { onMounted, onUnmounted } from 'vue'

// setup 阶段可用的
const props = defineProps<{ title: string }>()
const emit = defineEmits<{ change: [value: string] }>()

// 无法使用 this，但可以使用组合式 API
onMounted(() => {
  console.log('组件已挂载')
})

onUnmounted(() => {
  console.log('组件将卸载')  
})
</script>