vue 3 setup中状态初始化需解耦数据获取与组装，用ref/reactive+onmounted处理同步场景，async setup+suspense处理强依赖异步数据，自定义hook封装可复用逻辑，避免顶层fetch、onmounted堆砌和watch误用。
在 Vue 3 的 setup 函数中，状态初始化不是简单地赋值，而是要兼顾响应性、异步加载时机、依赖收集和错误边界。优雅的关键在于：**把“数据获取”和“状态组装”解耦，用组合式逻辑封装可复用的初始化流程，同时让副作用可控、可测试。**
用 ref / reactive + onMounted 处理基础同步初始化
适用于初始状态不依赖异步数据（如表单默认值、本地缓存读取）：
- 用
ref或reactive声明响应式状态，初始值设为合理占位（null、空数组、空对象或骨架结构） - 在
onMounted中执行轻量同步组装（如从localStorage恢复、合并 props 默认值） - 避免在
setup同步执行耗时操作或直接调用 API —— 这会阻塞组件挂载
用 async setup + suspense 处理强依赖首屏数据的场景
当组件必须等某些数据就绪才能渲染（如详情页、权限路由守卫后页面），推荐用 async setup 配合 <suspense></suspense>：
-
setup返回一个 Promise，内部用await加载关键数据 - 返回的响应式对象需在 Promise resolve 后构建（不能在 await 前就用
ref(data)包裹未就绪值） - 父级用
<suspense></suspense>提供 loading 和 error fallback，体验更自然 - 注意：仅适合“不可降级”的核心数据；非关键数据仍建议延迟加载（如用
onMounted）
用 自定义 Hook 封装初始化逻辑
把“请求 + 组装 + 错误处理 + 加载态”抽成可复用的 useInitData：
- 接收 API 函数、初始结构、失败重试策略等参数
- 内部统一管理
loading、error、data状态，并暴露refresh方法 - 支持传入
transform函数，在数据返回后做字段映射、格式转换、嵌套扁平化等组装工作 - 示例：
const { data, loading, error, refresh } = useInitData(fetchUser, { id: userId }, user => ({ ...user, fullName: `${user.firstName} ${user.lastName}` }))
避免常见反模式
不要在 setup 顶层直接写 fetch().then(...) 并手动赋值给 ref —— 这会丢失响应性更新时机，且难以追踪加载状态；不要把所有初始化逻辑堆在 onMounted 里导致职责混乱；不要用 watch 监听 props 触发首次加载 —— 除非是条件触发，否则应由生命周期或自定义 Hook 主动控制。
