vue 3 生命周期以setup为起点，早于响应式系统初始化，用于非响应式初始化；onbeforemount在虚拟dom完成但未渲染真实dom时执行；onmounted在真实dom插入后触发，可操作dom和第三方库。
Vue 3 的生命周期从 setup 开始，到 onMounted 完成挂载，是一条清晰、可控的执行链。它不再依赖 this 上下文，也不再区分 beforeCreate 和 created，而是以函数式注册的方式组织逻辑，让初始化与副作用分离更自然。
setup 是整个生命周期的起点
setup 在组件实例创建**之前**就执行，早于任何响应式系统初始化。它不是钩子，而是一个“逻辑入口函数”，接收 props 和 context，返回响应式引用或方法。
- 此时无法访问 this、data、methods 或 $refs，因为它们都还没建立
- 适合做非响应式初始化：加载配置、创建工具实例、设置默认值
- 所有 Composition API 钩子（如 onMounted）必须在 setup 内调用才能生效
挂载前：onBeforeMount 触发时机很关键
onBeforeMount 在模板编译完成、虚拟 DOM 创建完毕，但**尚未渲染为真实 DOM** 时执行。这是最后一次修改响应式数据而不触发额外更新的机会。
- 可以安全读写 ref/reactive 数据，但不能操作真实 DOM 元素
- 常见用途：根据路由参数预设状态、调整初始样式类、校验必要字段
- 如果在 onBeforeMount 中修改了响应式数据，视图会在挂载时一并更新，不会多一次 patch
onMounted 标志着 DOM 可操作性的开始
onMounted 在组件真实 DOM 节点被插入页面后立即执行。这是你第一次能可靠访问 this.$el、ref 元素、第三方 DOM 库（如 Chart.js、MapLibre）的时刻。
- 典型场景包括：发起首屏数据请求、初始化图表/地图、绑定全局事件监听器、启动定时器
- 可多次调用 onMounted，回调按注册顺序依次执行
- 若需清理（如 clearInterval、removeEventListener），应在 onUnmounted 中配对处理
父子组件挂载顺序有明确规则
在嵌套结构中，挂载流程严格遵循“自上而下创建、自下而上挂载”：
- 父组件 setup → 子组件 setup → 子组件 onBeforeMount → 子组件 onMounted → 父组件 onBeforeMount → 父组件 onMounted
- 这意味着子组件 DOM 总是先于父组件 DOM 就绪，适合在父组件 onMounted 中查询子组件 ref
- 但不要在父组件 onBeforeMount 中尝试访问子组件 DOM，此时它还不存在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
