Vue 3 Composition API 中生命周期通过 onXxx 函数注册，如 onMounted；必须在 setup 期间同步调用，支持多次注册，不支持 beforeCreate/created，顶层代码即等价于二者合并时机。
Vue 3 的生命周期在 Composition API 中不再写在选项对象里，而是通过函数调用的方式注册；setup 语法糖让这个过程更简洁——不用 return、不用 this、所有顶层声明自动可用。
生命周期钩子必须用 onXxx 函数调用
Options API 中的 mounted、updated 等，现在统一变成组合式函数，如 onMounted、onUpdated，且只能在 setup 执行期间调用（包括 <script setup></script>）：
- 每个钩子都接收一个回调函数，不能直接写逻辑语句
- 必须在组件初始化阶段同步调用，异步或条件调用会报错
-
onBeforeMount和onMounted之间 DOM 尚未挂载，但模板已编译完成 - 多个同类型钩子（如两个
onMounted）会按顺序依次执行
setup 语法糖下怎么写生命周期？
在 <script setup></script> 中，直接导入并调用即可，无需额外封装或返回：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 导入：
import { onMounted, onUnmounted, onUpdated } from 'vue' - 使用：
onMounted(() => { console.log('组件已挂载') }) - 可多次调用同一钩子，适合模块化逻辑拆分（例如从不同自定义 Hook 中分别注册）
- 不支持
beforeCreate和created—— 它们被“吸收”进setup执行本身：脚本顶层代码就等价于这两个钩子的合并时机
常见误区和关键细节
刚转 Composition API 容易踩坑，注意这些实际约束：
-
this在 setup 内完全不可用，生命周期回调里也不能访问this - 响应式数据（如
ref）在onMounted里可以直接读取和修改，值已是最新 - 如果需要访问 DOM 元素，必须配合
ref模板引用 +onMounted，因为setup执行时 DOM 还没生成 - 服务端渲染（SSR）环境下，
onMounted等客户端专属钩子不会执行，需用onServerPrefetch替代预取逻辑
对比 Vue 2 生命周期的映射关系
理解变化有助于迁移，核心对应如下：
-
beforeCreate / created→<script setup></script>顶层代码（变量声明、ref/reactive 初始化、普通函数定义） -
beforeMount→onBeforeMount -
mounted→onMounted -
beforeUpdate→onBeforeUpdate -
updated→onUpdated -
beforeDestroy→onBeforeUnmount -
destroyed→onUnmounted
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
