1. 从“黑盒”到“白盒”为什么我们需要理解Vue生命周期如果你刚接触Vue可能会觉得它很神奇你写一个模板定义一些数据Vue就能自动帮你把页面渲染出来数据变了视图也跟着变。很长一段时间里你可能都把它当作一个“黑盒”来用——知道输入什么能得到什么但不太清楚中间发生了什么。直到有一天你遇到了这样的问题我想在组件刚创建的时候去后台拉取数据应该写在哪里我想在组件被销毁前清理掉一个定时器应该写在哪里我想在DOM更新完成后操作一个第三方图表库又应该写在哪里这些问题都指向了Vue的核心运行机制之一生命周期。理解生命周期就是把Vue从“黑盒”变成“白盒”的过程。它让你清晰地知道你写的组件从一张白纸到最终呈现在用户面前再到被销毁回收中间经历了哪些关键的时间点。在这些时间点上Vue贴心地为你预留了“钩子”Hook函数让你可以插入自己的代码去完成特定的任务。很多人把学习生命周期等同于背诵八个钩子函数的名字和顺序这其实只完成了第一步。真正的价值在于你能根据业务需求精准地判断应该在哪个钩子里写什么代码以及为什么不能写在别处。比如为什么获取初始数据通常不放在created而放在mounted为什么修改DOM的操作要放在updated里但要小心无限循环这些问题的答案都藏在生命周期的执行上下文和时机里。最近在面试或与同行交流时我发现即使是有经验的开发者对某些生命周期的细节和应用场景也存在模糊地带。尤其是Vue 3引入了Composition API后虽然核心生命周期概念不变但使用方式和一些细微的时机差异又带来了新的讨论点。所以今天我想结合我这些年踩过的坑和积累的经验把Vue 2和Vue 3中的生命周期彻底掰开揉碎讲清楚。我们不止看“是什么”更要深挖“为什么”和“怎么用”让你下次再遇到生命周期相关的问题时能胸有成竹。2. 生命周期的全景图一张图看懂组件的“一生”在深入每个钩子之前我们需要先建立一个宏观的认知。你可以把一个Vue组件的生命周期想象成一个人的一生诞生创建、成长挂载、工作更新、衰老卸载。Vue为这个过程中的每个关键阶段都设置了观察点。为了方便理解我习惯将生命周期划分为四个主要阶段创建阶段Creation从无到有初始化组件的响应式数据和事件。挂载阶段Mounting将虚拟DOM转换为真实DOM并插入到页面中。更新阶段Updating当响应式数据发生变化时组件进行重新渲染和打补丁。卸载阶段Destruction/Unmouting组件实例被销毁清理其占用的资源。Vue 2的八个生命周期钩子就分布在这四个阶段。为了更直观我结合官方文档和实际引擎行为画了一个更贴近开发者视角的时序图用文字描述开始创建组件实例 | v beforeCreate 钩子被调用 | (此时data、methods未初始化) v 初始化 injections reactivity | (设置data的getter/setter methods可用) v created 钩子被调用 | (此时可访问data、methods但$el未挂载) v 编译模板如果使用运行时编译器版本 | 生成渲染函数 / 虚拟DOM v beforeMount 钩子被调用 | (此时$el仍是初始化前的占位DOM) v 创建$el并用其替换挂载点完成DOM渲染 | v mounted 钩子被调用 | (此时可操作真实DOM组件已挂载) v --- 组件进入稳定状态等待更新 --- | v (当数据变化触发更新) beforeUpdate 钩子被调用 | (此时数据已新DOM未更新) v 生成新的虚拟DOM与旧的对比Diff打补丁更新真实DOM | v updated 钩子被调用 | (此时数据已新DOM也已更新) v --- 可能经历多次更新循环 --- | v (当组件被销毁时如v-if为false、路由离开) beforeDestroy (Vue2) / beforeUnmount (Vue3) 钩子被调用 | (此时实例仍完全可用) v 拆卸观察者、子组件和事件监听器 | v destroyed (Vue2) / unmounted (Vue3) 钩子被调用 | (此时实例所有东西已解绑指令已解绑) v 组件实例被垃圾回收这个流程是理解所有钩子的基础。需要注意的是activated和deactivated是keep-alive缓存组件特有的钩子它们不参与主生命周期流而是在组件被切换缓存和激活时触发。3. 创建阶段beforeCreate与created的细微差别与实战抉择创建阶段是组件生命周期的起点。这个阶段的核心任务是初始化组件的内部状态但还没有开始DOM相关的操作。这里有两个钩子beforeCreate和created。3.1 beforeCreate黎明前的黑暗beforeCreate是生命周期中最早被调用的钩子。在这个阶段组件实例刚刚被创建但所有的响应式数据data、计算属性computed、方法methods以及事件监听watchers都还没有被初始化。你访问this.xxx得到的是undefined。那么这个钩子有什么用它的应用场景非常狭窄。因为它发生在所有初始化之前所以通常用于一些与组件数据完全无关的全局设置。例如在一些插件或混合mixin的编写中可能会利用这个钩子来注入一些全局属性或方法。但在99%的日常业务开发中你几乎不会用到它。我个人的经验是除非你在写一个底层库或框架需要极早地介入组件初始化过程否则可以暂时忽略它。注意正因为什么都访问不到千万不要在这里尝试调用this上的数据或方法否则会抛出错误。3.2 created数据已就位DOM仍虚无created钩子在beforeCreate之后被调用。此时Vue已经完成了响应式数据data、计算属性computed、方法methods和事件监听watchers的初始化。这意味着在created钩子里你可以安全地访问和修改this.data中的属性调用this.methods中的方法。这是生命周期中一个非常重要的时间点。因为DOM还没有开始渲染$el属性尚不可用所以所有不依赖于DOM的操作都可以放在这里进行。最常见的场景包括异步数据请求这是created最经典的用途。组件一创建好就立即向后端API发起请求获取初始数据。由于请求是异步的它不会阻塞DOM的渲染可以尽早开始从而可能缩短用户看到完整内容的时间。export default { data() { return { userList: [], loading: true }; }, async created() { try { const response await axios.get(/api/users); this.userList response.data; } catch (error) { console.error(Failed to fetch users:, error); } finally { this.loading false; } } };初始化非响应式数据有些数据你不需要Vue追踪其变化可以在created中直接挂载到实例上。created() { this.timer null; // 一个用于存储定时器ID的非响应式变量 this.externalLib new SomeLibrary(); // 初始化一个第三方库实例 }访问路由参数或Vuex状态在单页应用SPA中组件可能通过路由动态创建。在created中你可以访问到this.$route.params或this.$store.state来进行逻辑判断或数据初始化。一个关键的实战抉择数据请求到底放created还是mounted这是一个高频面试题。简单答案是对于绝大多数场景放在created里更好。理由如下更早发起请求created在mounted之前执行能更早地开始网络I/O理论上可以更早拿到数据。逻辑一致性数据获取属于“数据初始化”范畴放在“创建”阶段更符合语义。SSR兼容性在服务端渲染SSR中只有beforeCreate和created会在服务器端执行。如果你将数据请求放在mounted一个只在客户端执行的钩子会导致服务端渲染的页面没有数据。那什么时候需要放在mounted呢只有当你的数据请求强依赖于DOM元素时。例如你需要根据某个DOM元素的尺寸或位置来构造请求参数。但这种场景相对较少。4. 挂载阶段beforeMount与mounted从虚拟到真实的临界点挂载阶段是组件从内存中的JavaScript对象变成浏览器中真实DOM节点的过程。这个阶段涉及虚拟DOMVirtual DOM的生成和打补丁Patch有两个钩子beforeMount和mounted。4.1 beforeMount渲染前的最后时刻beforeMount在created之后、组件首次渲染之前被调用。此时Vue已经编译好了模板或渲染函数生成了对应的虚拟DOM树但还没有将其转换为真实DOM并插入到页面中。在这个钩子里你仍然无法访问到真实的DOM元素this.$el拿到的是挂载点的占位元素比如一个div idapp而不是渲染后的内容。它的使用场景比beforeCreate稍多但仍然不常见。一个可能的用途是在服务端渲染SSR时你可以在这里执行一些仅客户端的DOM操作准备但因为此时DOM仍未就绪所以能力有限。对于大多数开发者可以将其视为一个内部过渡阶段很少需要直接干预。4.2 mounted拥抱真实DOM的世界mounted是生命周期中最常用、也是最容易误用的钩子之一。它被调用时意味着Vue已经将编译好的模板替换了挂载点el选项指定的元素初始渲染工作已经完成。此时组件已经被挂载到页面上你可以通过this.$el或refs访问到真实的DOM节点。这是mounted最核心的价值操作DOM。常见场景包括集成第三方DOM库例如初始化ECharts图表、使用地图库如Leaflet、腾讯地图API创建地图实例、初始化富文本编辑器等。这些库通常需要一个真实的DOM容器作为参数。mounted() { // 假设有一个div refchart/div const chartDom this.$refs.chart; this.myChart echarts.init(chartDom); this.myChart.setOption({ /* ... */ }); }执行依赖DOM的测量获取元素的宽高、位置offsetTop, clientWidth等。mounted() { this.boxWidth this.$refs.container.offsetWidth; // 根据宽度动态计算某些样式或布局 }添加原生事件监听器虽然Vue有v-on但有些第三方库或复杂场景可能需要直接使用addEventListener。mounted() { window.addEventListener(resize, this.handleResize); }, beforeDestroy() { // Vue2 window.removeEventListener(resize, this.handleResize); }重要陷阱与经验异步更新与$nextTickmounted不保证所有子组件也都一起被挂载。如果你需要操作子组件的DOM可以使用this.$nextTick来确保整个视图都渲染完毕。mounted() { this.$nextTick(() { // 在这里可以安全地操作子组件DOM或执行依赖完整DOM的操作 this.initNestedLibrary(); }); }避免在此处修改响应式数据触发更新在mounted中修改数据会导致组件立即进入更新周期可能引发不必要的重复渲染。如果确实需要请确保有条件判断避免无限循环。服务端渲染SSRmounted不会在服务端被调用。它是纯客户端的钩子。因此任何只应在客户端执行的代码如上述DOM操作、访问window对象都必须放在mounted或之后的生命周期中否则在SSR时会报错。5. 更新阶段beforeUpdate与updated应对变化的艺术当组件依赖的响应式数据data、props、computed等发生变化时组件会进入更新阶段重新渲染视图。这个阶段有两个钩子beforeUpdate和updated。5.1 beforeUpdate数据已变视图待变beforeUpdate在数据发生变化之后、虚拟DOM重新渲染和打补丁之前被调用。此时组件的数据已经是最新的但视图DOM还是旧的。这个钩子给了你一个机会在视图更新前访问旧的DOM状态。一个典型的应用场景是记住元素的滚动位置。在数据变化导致列表更新前先记录下滚动条的位置然后在视图更新后updated中再恢复位置从而实现无缝的用户体验。data() { return { messages: [], scrollTop: 0 }; }, beforeUpdate() { // 在消息列表更新前记录容器的滚动位置 const container this.$refs.messageList; this.scrollTop container.scrollTop; }, updated() { // 在消息列表更新后恢复滚动位置 this.$nextTick(() { const container this.$refs.messageList; container.scrollTop this.scrollTop; }); }需要注意的是在beforeUpdate中同步地修改响应式数据是危险的因为它会再次触发更新流程如果逻辑不当很容易导致无限循环更新。通常我们只在这里进行“只读”或“记录”操作。5.2 updated视图与数据同步完成updated在数据变化导致的虚拟DOM重新渲染和打补丁之后被调用。此时组件的DOM已经更新完成与最新的数据保持同步。和mounted类似updated也常用于执行依赖更新后DOM的操作。例如当数据变化导致图表需要重新绘制时updated() { // 当关联的数据源dataSource变化后更新图表 if (this.myChart this.dataSource) { this.myChart.setOption({ series: [{ data: this.dataSource }] }); } }updated钩子的最大陷阱无限更新循环这是updated钩子最需要警惕的地方。因为任何在updated中对响应式数据的修改都会再次触发更新从而再次调用updated。如果没有合适的终止条件就会导致死循环浏览器卡死。// 危险示例 updated() { // 假设每次更新后都想让某个计数器加1 this.someCounter; // 这行代码会立即触发新一轮更新进入死循环 }安全使用updated的准则尽量避免在updated中修改依赖的数据。如果非要修改必须添加严格的判断条件确保不会重复触发。updated() { // 只有满足特定条件时才更新数据 if (this.shouldUpdateChart !this.isUpdating) { this.isUpdating true; // 设置锁 this.updateChartData(); this.$nextTick(() { this.isUpdating false; // 解锁 }); } }对于DOM操作优先考虑使用计算属性computed或侦听器watch。它们能更精确地响应特定数据的变化而不是在每次任何数据更新时都执行。考虑使用$nextTick有时DOM更新是异步的如果你需要确保DOM操作在本次更新周期完全结束后执行可以将其包裹在this.$nextTick回调中。总的来说更新阶段的钩子需要谨慎使用。在大多数情况下使用计算属性、侦听器或方法来实现数据变化时的副作用是更清晰、更安全的选择。6. 卸载阶段beforeDestroy与destroyed做好善后工作当组件被销毁时例如使用v-if切换、路由离开、父组件销毁等会进入卸载阶段。这个阶段的任务是清理组件占用的资源防止内存泄漏。Vue 2中对应的钩子是beforeDestroy和destroyedVue 3中更名为beforeUnmount和unmounted。6.1 beforeDestroy / beforeUnmount最后的清理机会beforeDestroy在组件实例销毁之前调用。在这一步实例仍然完全可用this仍然可以访问所有数据、方法和DOM。这是你进行清理工作的最后也是最佳时机。所有需要手动清理的资源都应该在这里处理清除定时器这是最常见的内存泄漏来源。beforeDestroy() { if (this.intervalId) { clearInterval(this.intervalId); this.intervalId null; } if (this.timeoutId) { clearTimeout(this.timeoutId); this.timeoutId null; } }解绑全局或自定义事件如果在mounted或其他地方用addEventListener绑定了事件必须在这里用removeEventListener解绑。beforeDestroy() { window.removeEventListener(resize, this.handleResize); eventBus.$off(some-event, this.eventHandler); // 如果使用了事件总线 }取消未完成的异步请求如果使用了如Axios的CancelToken可以在这里取消请求避免组件销毁后回调函数还在试图更新不存在的组件状态。beforeDestroy() { if (this.cancelToken) { this.cancelToken.cancel(Component destroyed.); } }销毁第三方库实例例如ECharts实例、地图实例等它们可能持有对DOM的引用。beforeDestroy() { if (this.myChart) { this.myChart.dispose(); this.myChart null; } }经验之谈养成在beforeDestroy中检查并清理资源的习惯。一个实用的技巧是在组件创建created或mounted时就将需要清理的资源如定时器ID、事件处理函数引用保存在组件实例的响应式或非响应式属性上这样在beforeDestroy中就能清晰地知道要清理什么。6.2 destroyed / unmounted尘埃落定destroyed在组件实例销毁之后调用。此时Vue实例的所有指令都已解绑所有事件监听器都已移除所有子实例也都被销毁。this上的所有东西理论上都不可再访问虽然有时还能访问到数据但绝对不应该再依赖它。在这个钩子里你几乎没有什么可做的了。它主要用于一些最终的日志记录或通知但业务逻辑的清理必须在beforeDestroy中完成。你可以把它看作是一个确认组件生命周期彻底结束的节点。Vue 3中的名称变化在Vue 3中为了更准确地描述行为“卸载”比“销毁”更贴切因为实例可能被缓存这两个钩子被重命名为beforeUnmount和unmounted。其功能和调用时机与Vue 2完全一致。7. 缓存组件的专属钩子activated与deactivatedkeep-alive是Vue内置的一个抽象组件用于缓存不活动的组件实例而不是销毁它们。当组件在keep-alive内切换时会触发两个特殊的生命周期钩子activated和deactivated。7.1 deactivated进入后台休眠当被缓存的组件失活即被切换到后台如通过v-if、v-show或路由切换时deactivated会被调用。此时组件实例仍然存在只是从DOM中移除并进入缓存状态。你可以在这里执行一些“暂停”操作停止页面轮播图的自动播放。暂停视频或音频的播放。清除一些临时状态如表单的草稿但注意如果希望保留则不要清空。取消一些不必要的、高频率的事件监听或数据订阅这些在activated中需要恢复。7.2 activated从缓存中唤醒当被缓存的组件激活即从后台被切换到前台时activated会被调用。此时组件实例被重新插入DOM。你可以在这里执行一些“恢复”或“刷新”操作重新开始轮播图播放。恢复视频或音频播放。根据新的路由参数或全局状态刷新数据例如从缓存中恢复的列表页可能需要重新获取最新数据。重新绑定在deactivated中解绑的事件或订阅。与常规生命周期的关系一个被keep-alive包裹的组件第一次渲染时会经历created-mounted-activated。之后切换隐藏时触发deactivated。之后再次显示时触发activated。不会再次触发created或mounted因为实例被复用了。当组件被彻底销毁如离开keep-alive范围或父组件销毁时才会触发beforeDestroy和destroyed。实战技巧activated钩子是实现“列表页返回保持位置”等功能的利器。你可以在deactivated时记录滚动位置在activated时恢复。同时也可以在activated中判断数据是否需要刷新例如判断数据是否过时从而实现更智能的数据加载策略提升用户体验。8. Vue 3 Composition API下的生命周期Vue 3的Composition API提供了一种全新的代码组织方式生命周期钩子也以函数的形式提供需要在setup()函数中调用。它们与Options API中的钩子存在一一对应关系但使用方式更灵活。8.1 基本对应关系与使用在setup()函数中生命周期钩子是通过从vue包中导入的函数来使用的import { onMounted, onUpdated, onUnmounted, ref } from vue; export default { setup() { const count ref(0); // 对应 Options API 的 mounted onMounted(() { console.log(组件已挂载); // 可以操作DOM或初始化第三方库 }); // 对应 Options API 的 updated onUpdated(() { console.log(组件已更新); // 注意避免无限循环 }); // 对应 Options API 的 beforeDestroy/unmounted onUnmounted(() { console.log(组件即将卸载); // 清理定时器、事件监听器等 }); // created 和 beforeCreate 呢 // 在 setup() 函数本身内部执行的代码就相当于 created 钩子。 // beforeCreate 在 setup() 之前执行在 Composition API 中极少需要。 console.log(这相当于 created 钩子里的代码); fetchData(); // 初始数据请求可以放在这里 return { count }; } };关键变化与优势setup()替代了beforeCreate和createdsetup()函数在组件实例创建之初、beforeCreate之后、created之前执行。因此在setup()函数体内同步执行的代码其执行时机就等同于created钩子。beforeCreate在Composition API中几乎没有使用场景。更好的代码组织相关的逻辑数据、计算属性、生命周期、方法可以组织在一起而不是分散在data、methods、created等不同选项中。更灵活的逻辑复用生命周期逻辑可以轻松地封装到独立的组合式函数composable中。8.2 生命周期钩子对照表与细节差异下表清晰地展示了Options API与Composition API生命周期钩子的对应关系Options API (Vue 2/3)Composition API (Vue 3)执行时机说明beforeCreateNot Needed在setup()之前运行在setup()中无法访问到组件实例。通常无需使用。createdsetup()bodysetup()函数体内部的同步代码。beforeMountonBeforeMount在挂载开始之前被调用。mountedonMounted组件挂载完成后调用。beforeUpdateonBeforeUpdate在响应式数据变更导致DOM更新之前调用。updatedonUpdated在响应式数据变更导致DOM更新之后调用。beforeDestroy(Vue2)onBeforeUnmount在组件实例卸载之前调用。destroyed(Vue2)onUnmounted在组件实例卸载之后调用。activatedonActivated被keep-alive缓存的组件激活时调用。deactivatedonDeactivated被keep-alive缓存的组件失活时调用。errorCapturedonErrorCaptured捕获后代组件错误时调用。一个重要的细节差异onUpdated的触发时机在Options API中updated钩子会在任何组件数据更新导致的DOM重渲染后触发。而在Composition API的onUpdated中如果你在同一个事件循环中同步修改了多个响应式状态Vue的响应式系统会将这些更新批量处理onUpdated只会触发一次。这通常是更高效的但如果你依赖每次状态变更都执行副作用需要注意这一点。对于这种细粒度控制可以使用watch或watchEffect。8.3 在组合式函数中使用生命周期这是Composition API最强大的特性之一。你可以将生命周期逻辑封装到可复用的函数中// useMousePosition.js import { onMounted, onUnmounted, reactive } from vue; export function useMousePosition() { const position reactive({ x: 0, y: 0 }); const update (e) { position.x e.pageX; position.y e.pageY; }; onMounted(() { window.addEventListener(mousemove, update); }); onUnmounted(() { window.removeEventListener(mousemove, update); }); return position; }然后在组件中使用// MyComponent.vue import { useMousePosition } from ./useMousePosition; export default { setup() { const mouse useMousePosition(); // 逻辑被完美复用和封装 return { mouse }; } };这种方式让关注点分离和逻辑复用达到了新的高度也是Vue 3开发的推荐模式。理解Vue生命周期尤其是理解每个钩子被调用时的“上下文”什么可用什么不可用和“时机”在整体流程中的位置是写出健壮、高效Vue应用的基础。它帮助你避免常见的陷阱如内存泄漏、无限更新并让你能在正确的时间点做正确的事。无论是Options API还是Composition API其核心思想都是一脉相承的。希望这篇详细的梳理能让你对Vue组件的“一生”有一个透彻的理解。在实际开发中多思考“这段代码应该放在哪个生命周期为什么”你的代码架构能力会得到显著的提升。
![[GESP202606 四级] 扫雷](http://pic.xiahunao.cn/yaotu/[GESP202606 四级] 扫雷)
