setup 是 Vue 3 组合式 API 的唯一入口，在组件实例创建前执行，需在此定义响应式数据、逻辑及生命周期钩子；接收 props 和 context 参数，必须显式 return 暴露给模板的内容。
setup 函数是 Vue 3 组合式 API 的起点，它在组件实例创建前就执行，比 beforeCreate 还早，此时 this 不可用，所有响应式逻辑、方法、生命周期钩子都得在这里组织和注册。
setup 是组合式 API 的唯一入口
所有组合式 API（如 ref、reactive、computed、watch、onMounted 等）必须在 setup 内部或其调用的函数中使用。它不是可选钩子，而是逻辑容器——Vue 2 中分散在 data、methods、computed、mounted 等处的代码，现在统一收束于此。
- 不能在 setup 外定义响应式数据再传入；必须在 setup 内用
ref()或reactive()创建 - 不能在 setup 外调用
onMounted；生命周期函数必须在 setup 内注册才生效 - setup 返回的对象，才是模板能访问到的“公开接口”，未 return 的变量/函数在模板中不可见
参数：props 和 context 的实际用途
setup 接收两个参数：props（父组件传入的响应式 props）和 context（上下文对象），后者包含 attrs、slots、emit 等常用属性，但没有 this。
-
props是只读响应式对象，修改会报警告；如需派生或解构，建议用toRefs或toRef -
context.emit用于子组件向父组件触发事件，替代 Vue 2 的this.$emit -
context.slots可访问具名插槽内容，context.attrs获取未声明为 prop 的属性
作为生命周期桥梁的关键操作
setup 本身不提供生命周期阶段，但它让生命周期钩子变成可组合的函数，实现逻辑按关注点分离。
- 用
onMounted(() => { ... })替代mounted选项，适合封装初始化请求、DOM 操作等 - 用
watch(() => count.value, (newVal) => {...})替代watch选项，支持监听任意响应式源 - 用
onBeforeUnmount(() => { cleanup() })清理定时器、事件监听器，避免内存泄漏 - 多个
onMounted可共存，便于将不同模块的挂载逻辑拆分到独立函数中
返回值决定模板可见性
setup 必须显式 return 一个对象（或使用 <script setup> 语法糖自动暴露），否则模板无法访问任何内容。
- 返回的 ref 响应式变量，在模板中直接写
{{ count }}，无需 .value - 返回的函数在模板中可直接绑定事件，如
@click="increment" - 若使用
reactive({ count: 0 })，解构后会丢失响应性，推荐用toRefs包裹后再 return
