setup顶层适合同步、无dom依赖的响应式初始化，onbeforemount适合需访问响应式状态但dom未挂载的副作用操作。
在 Vue 3 的 Composition API 中，setup 顶层和onBeforeMount都是执行初始化逻辑的常见位置，但它们的执行时机、适用场景和副作用处理方式不同。合理安排关键看：是否依赖响应式状态、是否需要访问 DOM、是否涉及异步、是否需确保组件已创建但未挂载。
setup 顶层适合：同步、无 DOM 依赖、基础响应式初始化
这是组件实例创建后、任何生命周期钩子之前执行的阶段。所有在 setup 中直接写的同步代码都会在此运行。
- 声明 ref / reactive 状态、计算属性、普通函数 —— 这是标准做法
- 执行纯同步逻辑（如从 props 解构默认值、格式化初始数据、预设配置对象）
- 调用组合式函数（composable），只要它们内部不依赖 DOM 或当前实例上下文
- ⚠️ 注意：此时
el不存在，this不可用，getCurrentInstance()返回的实例也尚未挂载，$refs为空
onBeforeMount 适合：需确保组件已创建、可安全读取响应式状态、但 DOM 尚未渲染
它在模板编译完成、虚拟 DOM 创建完毕、真实 DOM 挂载前触发。此时组件实例已就绪，响应式系统已激活，但 DOM 节点还未插入文档。
- 需要基于响应式状态做最终初始化判断（例如根据
ref值决定是否加载某模块） - 执行依赖
getCurrentInstance()或proxy的逻辑（如手动注册事件总线监听） - 触发首次异步请求（尤其当结果要影响初始渲染，且你希望请求在挂载前发起，避免白屏）
- 需要访问
$refs的“占位”逻辑（注意：onBeforeMount时$refs仍为空，真正可用要等onMounted；但如果配合nextTick或延迟微任务，有时可做轻量准备）
常见误用与建议
避免把本该同步完成的响应式初始化拖到 onBeforeMount：比如只是定义一个 ref 或计算属性，写在 setup 顶层更清晰、更早生效、利于 TypeScript 推导。
- ❌ 不推荐：
在onBeforeMount里重复做const data = ref([])—— 这属于 setup 职责 - ✅ 推荐：
setup 顶层定义状态 + 逻辑判断 →onBeforeMount触发副作用（如请求、日志、第三方 SDK 初始化） - 如果初始化含异步（如
await api.init()），且你不希望阻塞组件创建，应放在onBeforeMount（或onMounted）中，并配合 loading 状态管理；setup 顶层不能直接 await（除非用 IIFE，但会丢失响应式链）
一个典型协作模式
比如初始化一个带权限控制的数据列表：
- setup 顶层：声明
list = ref([])、loading = ref(false)、hasPermission = computed(() => ...) - onBeforeMount：检查
hasPermission.value，为真则执行fetchList()（内部含 await） - 这样既保证状态可响应，又让副作用在安全时机触发，也便于单元测试拆分逻辑与副作用
