文章目录Vue 组件生命周期详解从创建到卸载什么是组件生命周期了解生命周期可以做什么生命周期四阶段1. 创建2. 挂载3. 更新4. 卸载Vue 2 和 Vue 3 生命周期钩子对照setup 与生命周期钩子的关系完整代码示例父子组件生命周期执行顺序进阶常见错误与实践建议小结Vue 组件生命周期详解从创建到卸载一个 Vue 组件从诞生到销毁会经历哪些阶段每个阶段能做什么、不能做什么这篇把生命周期四个阶段、Vue 2/3 钩子对照、setup与钩子的关系以及常见踩坑一次讲清楚。什么是组件生命周期组件生命周期指的是一个 Vue 组件实例从创建、挂载、更新到最终卸载的完整过程。理解它你就能知道“代码该写在哪个时机”而不是凭感觉到处试。了解生命周期可以做什么先抛出两个高频问题后文会逐一回答最早什么时候可以发送 Ajax 请求获取数据最早什么时候可以操作 DOM这两个问题本质上都是在问某段逻辑应该放在生命周期的哪个阶段。生命周期四阶段1. 创建初始化响应式数据、方法和事件。此时组件实例已经存在但真实 DOM 还没有生成。Vue 2 对应beforeCreate/createdVue 3 组合式 API由setup()统一承担2. 挂载把渲染结果插入页面模板里的{{ data }}插值开始生效真实 DOM 已经可用。挂载前beforeMount/onBeforeMountDOM 还没插入挂载后mounted/onMountedDOM 已插入可操作回答第一个问题最早能发 Ajax 请求的时机是setup/created此时数据已初始化但更推荐放在onMounted中避免阻塞首次渲染。回答第二个问题最早能操作 DOM 的时机是onMounted。onBeforeMount阶段真实 DOM 还未挂载拿不到元素。3. 更新响应式数据发生变化后组件重新渲染。更新前beforeUpdate/onBeforeUpdate更新后updated/onUpdated典型用途在onUpdated中读取最新 DOM 尺寸、触发动画、同步第三方库。4. 卸载组件从页面移除需要释放资源避免内存泄漏。卸载前beforeDestroyVue 2/beforeUnmountVue 3卸载后destroyedVue 2/unmountedVue 3典型用途清除定时器、解绑事件监听、关闭 WebSocket、销毁 ECharts / 地图等第三方实例。Vue 2 和 Vue 3 生命周期钩子对照阶段Vue 2选项式 APIVue 3选项式 APIVue 3组合式 API创建前beforeCreate()beforeCreate()由setup()承担创建后created()created()由setup()承担挂载前beforeMount()beforeMount()onBeforeMount()挂载后mounted()mounted()onMounted()更新前beforeUpdate()beforeUpdate()onBeforeUpdate()更新后updated()updated()onUpdated()卸载前beforeDestroy()beforeUnmount()onBeforeUnmount()卸载后destroyed()unmounted()onUnmounted()补充说明Vue 3 的选项式 API中beforeCreate/created仍然可用只是新代码一般不再使用统一由setup()替代。使用KeepAlive缓存组件时还会触发onActivated/onDeactivated两个钩子。setup与生命周期钩子的关系setup()是 Vue 3 组合式 API 的入口它在beforeCreate之前执行承担了原来beforeCreatecreated的初始化职责。在script setup中直接导入并调用onXxx系列函数即可注册钩子scriptsetupimport{onMounted,onUnmounted}fromvueonMounted((){console.log(组件挂载完成)})onUnmounted((){console.log(组件卸载清理资源)})/script完整代码示例一个可运行的最小 Demo覆盖四个阶段scriptsetupimport{ref,onBeforeMount,onMounted,onUpdated,onUnmounted}fromvueconstcountref(0)onBeforeMount(()console.log(beforeMountDOM 尚未挂载))onMounted(()console.log(mounted可以操作 DOM 了,document.querySelector(#box)))onUpdated(()console.log(updated数据变化后的最新 DOM))onUnmounted(()console.log(unmounted清理定时器 / 监听器))/scripttemplatedividbox{{ count }}/divbuttonclickcount1/button/template父子组件生命周期执行顺序进阶初次渲染时父子组件的钩子执行顺序为父 beforeMount → 子 beforeMount → 子 mounted → 父 mounted理解这一点在调试“子组件 DOM 还没准备好就被父组件调用”这类问题时会很有帮助。常见错误与实践建议在onUpdated里修改状态容易触发无限更新循环务必避免。忘记清理定时器 / 监听器一定要放在onUnmounted中否则会造成内存泄漏。在setup顶层同步发请求会阻塞首次渲染建议放到onMounted。以为onBeforeMount能操作 DOM此时真实 DOM 还未插入必然拿不到元素。Vue 2 项目直接照搬 Vue 3 钩子名beforeDestroy/destroyed在 Vue 3 中已改名为beforeUnmount/unmounted。小结生命周期本质上回答的是“代码写在哪个时机”的问题。记住三句话就够用发请求setup/created即可推荐onMounted。操作 DOM必须onMounted之后。清理资源必须onUnmounted中。把这三点记牢绝大多数生命周期相关的问题都不会再踩坑。