Vue Composition API 中生命周期钩子需导入 onXxx 函数并在 setup 中同步调用，如 onMounted、onUnmounted；setup 本身替代 created，DOM 相关操作须在 onMounted 中执行。
在 Vue Composition API 中，生命周期钩子函数不能像 Options API 那样直接写成对象属性，而是通过 导入对应的 onXxx 函数，在 setup() 中调用并传入回调函数来注册。
常用生命周期钩子的对应写法
Vue 3 的 Composition API 将生命周期钩子统一为以 on 开头的函数，需从 vue 中显式导入：
-
onBeforeMount→ 替代 Options API 中的beforeMount -
onMounted→ 替代mounted -
onBeforeUpdate→ 替代beforeUpdate -
onUpdated→ 替代updated -
onBeforeUnmount→ 替代beforeUnmount（Vue 2 中叫beforeDestroy） -
onUnmounted→ 替代unmounted（Vue 2 中叫destroyed） - 还有
onActivated、onDeactivated（用于<keep-alive>组件）
在 setup 中正确调用示例
必须在 setup() 同步执行时调用这些函数（不能放在异步回调或条件语句中），否则会失效：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
import { defineComponent, onMounted, onUnmounted } from 'vue'
export default defineComponent({
setup() {
onMounted(() => {
console.log('组件已挂载')
// 可发起请求、初始化第三方库等
})
onUnmounted(() => {
console.log('组件即将卸载')
// 清理定时器、事件监听、WebSocket 连接等
})
return {}
}
})
注意作用域与响应式配合
生命周期回调中可以安全访问 setup 中定义的响应式数据和方法，因为它们处于同一作用域：
立即学习“前端免费学习笔记（深入）”；
- 如果在
onMounted中需要修改ref或reactive数据，直接操作即可 - 若需在
onUnmounted中清理副作用（如setTimeout或addEventListener），建议把相关引用（如 timer ID）也声明在setup顶层，确保能被清理函数访问到
不支持的钩子与替代方案
Composition API 没有直接提供 created 钩子 —— 因为 setup() 本身就在组件实例创建后、挂载前执行，相当于 created + beforeMount 的结合体。所以：
- 初始化逻辑（如定义 ref、计算属性、调用 composable）直接写在
setup()函数体里 - 依赖 DOM 的操作（如获取元素尺寸、调用第三方 UI 库初始化）必须放在
onMounted中
