Vue 3组合式API中生命周期钩子需显式导入并在setup内调用，命名更语义化；setup替代beforeCreate/created，onBeforeMount/onMounted对应挂载阶段，onBeforeUpdate/onUpdated对应更新阶段，onBeforeUnmount/onUnmounted对应卸载阶段。
Vue 3 的组合式 API 中，生命周期钩子必须在 setup() 函数内（或 <script setup> 语法中）通过显式导入调用。它们不再作为组件选项存在，而是函数式注册的回调，执行时机与 Vue 2 的对应钩子逻辑一致，但命名更语义化、职责更清晰。
setup() 替代 beforeCreate 和 created
setup() 是组合式 API 的入口，在组件实例初始化阶段最早执行，此时响应式状态尚未挂载，没有 this，无法访问 DOM 或 $el。它承担了 Vue 2 中 beforeCreate 和 created 的全部职责：
- 定义
ref、reactive、computed、watch等响应式数据和逻辑 - 声明方法并返回给模板使用
- 可发起初始请求（如需服务端渲染兼容，建议配合
onMounted判断客户端环境）
挂载阶段：onBeforeMount 与 onMounted
这两个钩子对应 Vue 2 的 beforeMount 和 mounted：
-
onBeforeMount：虚拟 DOM 已生成，但真实 DOM 尚未插入页面。适合做挂载前的最后准备，比如调整临时状态或预处理数据 -
onMounted：组件已渲染到页面，真实 DOM 可访问、可操作。最常用场景包括初始化 ECharts、地图 SDK、焦点设置、第三方插件绑定、需要 DOM 尺寸的计算等
更新阶段：onBeforeUpdate 与 onUpdated
对应 Vue 2 的 beforeUpdate 和 updated，均在响应式数据变化触发重新渲染时执行：
立即学习“前端免费学习笔记（深入）”；
-
onBeforeUpdate：DOM 尚未更新，仍可读取旧的 DOM 状态（如元素位置、尺寸），适合记录变更前快照 -
onUpdated：DOM 已完成重绘，可安全操作新结构。⚠️ 注意：不要在此修改响应式数据，否则会触发新一轮更新，导致无限循环
卸载阶段：onBeforeUnmount 与 onUnmounted
对应 Vue 2 的 beforeDestroy 和 destroyed，用于资源清理：
-
onBeforeUnmount：组件仍完整可用，DOM 仍在页面上。适合清除定时器、取消未完成的请求、解绑全局事件（如window.resize）、销毁第三方实例 -
onUnmounted：组件已完全卸载，所有响应式依赖、侦听器、子组件均已销毁。可用于日志上报、状态归档等收尾工作；此时 DOM 已移除，不可访问
