setup 是 composition api 的唯一入口，作为组件初始化阶段的逻辑中枢，在实例创建前执行，不依赖 this，接收 props 和 context 参数，返回对象供模板使用，并支持响应式状态定义、组合函数拆分及生命周期钩子注册。
setup 函数是 Composition API 的唯一入口，所有组合式逻辑都从这里开始组织。它不是“又一个生命周期”，而是组件初始化阶段的逻辑中枢——在实例创建前执行，不依赖 this，也不访问 data 或 methods 等 Options 风格字段。
setup 的基本结构和参数
setup 是一个普通函数，接收两个参数：
- props：父组件传入的响应式 props（只读，需用 toRefs 解构才保持响应性）
- context：包含 attrs、slots、emit 的上下文对象（非响应式，可直接解构使用）
函数必须返回一个对象或 setup 语法糖中声明的顶层绑定，这些才会暴露给模板使用。
响应式状态与逻辑分组
在 setup 内部，用 ref、reactive、computed 等函数定义状态和派生值，并按功能自然聚类：
- 用户信息相关：ref 定义 name/age，配合 getName() / updateAge() 封装操作
- 表单校验相关：ref 定义 errors 对象，watch 监听输入，computed 判断是否可提交
- 列表加载相关：ref 定义 list/loading，useQuery 组合函数封装请求与缓存逻辑
这种写法让“一个功能的所有代码”（数据 + 方法 + 侦听 + 计算）物理上靠在一起，避免 Options API 中跨 data/methods/watch 的跳转维护。
拆分大型逻辑：组合函数（Composables）
当 setup 内部变长，不要硬塞一堆变量，而是提取为独立的组合函数：
- 写一个 useUser(apiClient) 返回 { user, fetchUser, updateUser }
- 写一个 useForm(initial) 返回 { form, errors, validate, reset }
- 在 setup 中直接解构使用：return { ...useUser(), ...useForm() }
这些函数可复用、可测试、可单独导入，是 Composition API 真正释放能力的关键模式。
生命周期与副作用处理
setup 中不能使用 created/mounted 等 Options 钩子，但可用 onMounted、onUnmounted 等函数注册：
- onMounted(() => { console.log('DOM 已就绪') })
- watch(() => count.value, (n) => console.log('count changed:', n))
- watchEffect(() => console.log('count is', count.value)) —— 自动追踪响应式依赖
注意：watch 和 watchEffect 必须在 setup 执行期间调用，否则无效；它们的清理逻辑（如取消请求）会由 Vue 自动管理。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
