setup函数是Composition API的执行入口，早于props解析和生命周期钩子运行，不绑定this；ref用于基础类型响应式，reactive用于对象数组；computed创建派生状态，watch/watchEffect实现响应式监听；组合函数以use开头封装可复用逻辑。
一、理解 setup 函数：Composition API 的执行入口
setup 函数是 Composition API 的核心执行上下文，它在组件实例创建之前被调用，且早于 props 解析完成之后、所有生命周期钩子之前运行。该函数不绑定 this，因此无法访问组件实例，所有逻辑必须通过显式声明和返回来暴露给模板或其它 API。
1、在单文件组件中，使用 <script setup> 语法糖可省略 setup 函数声明及 return 语句，所有顶层绑定自动暴露。
2、若使用传统 export default { setup() { ... } } 形式，必须显式 return 一个对象，其属性和方法才可在模板中使用。
3、setup 接收两个参数：props（响应式 props 对象）与 context（含 attrs、slots、emit 等非响应式上下文对象），不可解构 props 以避免失去响应性。
立即学习“前端免费学习笔记（深入）”；
二、管理响应式状态：ref 与 reactive 的分工应用
Vue 3 将响应式数据分为基础类型与引用类型两类处理机制，ref 专用于基本类型（String/Number/Boolean/Null/Undefined）及需保持响应式引用的场景；reactive 则用于对象与数组等引用类型，提供深层响应式能力且无需 .value 访问。
1、对基础值使用 ref：声明 const count = ref(0)，脚本中读写需 count.value，模板中自动解包可直接写 {{ count }}。
2、对对象或数组使用 reactive：声明 const form = reactive({ name: '', email: '' })，后续可直接 form.name = 'Alice'，无需 .value，但不可被解构后仍保持响应性。
3、当需解构 reactive 对象并保留响应性时，必须配合 toRefs(form) 使用，将每个属性转为独立 ref，再解构赋值。
三、构建计算与派生状态：computed 与 readonly 的组合使用
computed 用于声明依赖响应式源的派生值，返回一个只读的响应式 ref；readonly 则用于防止意外修改响应式对象，常用于向子组件 provide 或作为 computed 返回值的保护层。
1、创建简单计算属性：定义 const doubleCount = computed(() => count.value * 2)，其值随 count 变化自动更新，模板中直接使用 {{ doubleCount }}。
2、创建带 getter/setter 的计算属性：传入对象形式，computed({ get() { ... }, set(v) { ... } })，适用于双向绑定封装场景。
3、对 reactive 对象做只读封装：使用 const safeForm = readonly(form)，确保下游组件无法修改原始状态，同时保留响应式通知能力。
四、监听响应式变化：watch 与 watchEffect 的适用边界
watch 显式指定监听源，适合精确控制触发时机与清理逻辑；watchEffect 则自动追踪内部响应式依赖，适合副作用初始化与轻量级响应场景，但不支持立即执行与深度监听选项。
1、监听单个 ref：调用 watch(count, (newVal, oldVal) => { console.log(newVal) })，回调接收新旧值，支持 flush 选项控制执行时机。
2、监听 reactive 对象的深层属性：使用 watch(() => user.profile.name, ...) 或 watch(user, ..., { deep: true })，后者会监听整个对象变更。
3、自动依赖收集的副作用：使用 watchEffect(() => { console.log('user.name:', user.name) })，首次运行即执行，后续仅在 user.name 变化时触发，无需手动指定源。
五、组织可复用逻辑：自定义组合函数（Composables）的编写规范
组合函数是将一组相关响应式状态、计算属性、副作用和方法封装为独立函数的实践方式，遵循单一职责原则，接受必要参数并返回响应式公开接口，实现跨组件逻辑复用。
1、命名以 use 开头，如 useFetch、useVModel，明确标识其为组合式逻辑单元。
2、内部使用 ref/reactive/computed/watch 等 API 构建状态流，最终 return 一个包含响应式属性与操作函数的对象。
3、若需访问组件上下文（如 emit、slots），应通过 setup 的 context 参数或 defineComponent 的 setup 签名显式传入，避免隐式依赖。
