Vue生命周期钩子函数详解：从创建到销毁的完整指南

1. 从“黑盒”到“白盒”：为什么我们需要理解Vue生命周期

如果你刚接触Vue，可能会觉得它很神奇：你写一个模板，定义一些数据，Vue就能自动帮你把页面渲染出来，数据变了视图也跟着变。很长一段时间里，你可能都把它当作一个“黑盒”来用——知道输入什么能得到什么，但不太清楚中间发生了什么。直到有一天，你遇到了这样的问题：我想在组件刚创建的时候去后台拉取数据，应该写在哪里？我想在组件被销毁前清理掉一个定时器，应该写在哪里？我想在DOM更新完成后操作一个第三方图表库，又应该写在哪里？

这些问题，都指向了Vue的核心运行机制之一：生命周期。理解生命周期，就是把Vue从“黑盒”变成“白盒”的过程。它让你清晰地知道，你写的组件从一张白纸到最终呈现在用户面前，再到被销毁回收，中间经历了哪些关键的时间点。在这些时间点上，Vue贴心地为你预留了“钩子”（Hook）函数，让你可以插入自己的代码，去完成特定的任务。

很多人把学习生命周期等同于背诵八个钩子函数的名字和顺序，这其实只完成了第一步。真正的价值在于，你能根据业务需求，精准地判断应该在哪个钩子里写什么代码，以及为什么不能写在别处。比如，为什么获取初始数据通常不放在created而放在mounted？为什么修改DOM的操作要放在updated里但要小心无限循环？这些问题的答案，都藏在生命周期的执行上下文和时机里。

最近在面试或与同行交流时，我发现即使是有经验的开发者，对某些生命周期的细节和应用场景也存在模糊地带。尤其是Vue 3引入了Composition API后，虽然核心生命周期概念不变，但使用方式和一些细微的时机差异，又带来了新的讨论点。所以，今天我想结合我这些年踩过的坑和积累的经验，把Vue 2和Vue 3中的生命周期彻底掰开揉碎讲清楚。我们不止看“是什么”，更要深挖“为什么”和“怎么用”，让你下次再遇到生命周期相关的问题时，能胸有成竹。

2. 生命周期的全景图：一张图看懂组件的“一生”

在深入每个钩子之前，我们需要先建立一个宏观的认知。你可以把一个Vue组件的生命周期想象成一个人的一生：诞生（创建）、成长（挂载）、工作（更新）、衰老（卸载）。Vue为这个过程中的每个关键阶段都设置了观察点。

为了方便理解，我习惯将生命周期划分为四个主要阶段：

1. 创建阶段（Creation）：从无到有，初始化组件的响应式数据和事件。
2. 挂载阶段（Mounting）：将虚拟DOM转换为真实DOM，并插入到页面中。
3. 更新阶段（Updating）：当响应式数据发生变化时，组件进行重新渲染和打补丁。
4. 卸载阶段（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的操作都可以放在这里进行。最常见的场景包括：

1. 异步数据请求：这是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; } } };

2. 初始化非响应式数据：有些数据你不需要Vue追踪其变化，可以在created中直接挂载到实例上。

   created() { this.timer = null; // 一个用于存储定时器ID的非响应式变量 this.externalLib = new SomeLibrary(); // 初始化一个第三方库实例 }

3. 访问路由参数或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节点的过程。这个阶段涉及虚拟DOM（Virtual DOM）的生成和打补丁（Patch），有两个钩子：beforeMount和mounted。

4.1 beforeMount：渲染前的最后时刻

beforeMount在created之后、组件首次渲染之前被调用。此时，Vue已经编译好了模板（或渲染函数），生成了对应的虚拟DOM树，但还没有将其转换为真实DOM并插入到页面中。

在这个钩子里，你仍然无法访问到真实的DOM元素（this.$el拿到的是挂载点的占位元素，比如一个<div id="app">，而不是渲染后的内容）。它的使用场景比beforeCreate稍多，但仍然不常见。一个可能的用途是，在服务端渲染（SSR）时，你可以在这里执行一些仅客户端的DOM操作准备，但因为此时DOM仍未就绪，所以能力有限。

对于大多数开发者，可以将其视为一个内部过渡阶段，很少需要直接干预。

4.2 mounted：拥抱真实DOM的世界

mounted是生命周期中最常用、也是最容易误用的钩子之一。它被调用时，意味着Vue已经将编译好的模板替换了挂载点（el选项指定的元素），初始渲染工作已经完成。此时，组件已经被挂载到页面上，你可以通过this.$el或refs访问到真实的DOM节点。

这是mounted最核心的价值：操作DOM。常见场景包括：

1. 集成第三方DOM库：例如初始化ECharts图表、使用地图库（如Leaflet、腾讯地图API）创建地图实例、初始化富文本编辑器等。这些库通常需要一个真实的DOM容器作为参数。

   mounted() { // 假设有一个<div ref="chart"></div> const chartDom = this.$refs.chart; this.myChart = echarts.init(chartDom); this.myChart.setOption({ /* ... */ }); }

2. 执行依赖DOM的测量：获取元素的宽高、位置（offsetTop, clientWidth等）。

   mounted() { this.boxWidth = this.$refs.container.offsetWidth; // 根据宽度动态计算某些样式或布局 }

3. 添加原生事件监听器：虽然Vue有v-on，但有些第三方库或复杂场景可能需要直接使用addEventListener。

   mounted() { window.addEventListener('resize', this.handleResize); }, beforeDestroy() { // Vue2 window.removeEventListener('resize', this.handleResize); }

重要陷阱与经验：

• 异步更新与$nextTick：mounted不保证所有子组件也都一起被挂载。如果你需要操作子组件的DOM，可以使用this.$nextTick来确保整个视图都渲染完毕。

  mounted() { this.$nextTick(() => { // 在这里可以安全地操作子组件DOM或执行依赖完整DOM的操作 this.initNestedLibrary(); }); }

• 避免在此处修改响应式数据触发更新：在mounted中修改数据会导致组件立即进入更新周期，可能引发不必要的重复渲染。如果确实需要，请确保有条件判断，避免无限循环。
• 服务端渲染（SSR）：mounted不会在服务端被调用。它是纯客户端的钩子。因此，任何只应在客户端执行的代码（如上述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的准则：

1. 尽量避免在updated中修改依赖的数据。如果非要修改，必须添加严格的判断条件，确保不会重复触发。

   updated() { // 只有满足特定条件时才更新数据 if (this.shouldUpdateChart && !this.isUpdating) { this.isUpdating = true; // 设置锁 this.updateChartData(); this.$nextTick(() => { this.isUpdating = false; // 解锁 }); } }

2. 对于DOM操作，优先考虑使用计算属性（computed）或侦听器（watch）。它们能更精确地响应特定数据的变化，而不是在每次任何数据更新时都执行。
3. 考虑使用$nextTick：有时DOM更新是异步的，如果你需要确保DOM操作在本次更新周期完全结束后执行，可以将其包裹在this.$nextTick回调中。

总的来说，更新阶段的钩子需要谨慎使用。在大多数情况下，使用计算属性、侦听器或方法来实现数据变化时的副作用是更清晰、更安全的选择。

6. 卸载阶段：beforeDestroy与destroyed，做好善后工作

当组件被销毁时（例如，使用v-if切换、路由离开、父组件销毁等），会进入卸载阶段。这个阶段的任务是清理组件占用的资源，防止内存泄漏。Vue 2中对应的钩子是beforeDestroy和destroyed（Vue 3中更名为beforeUnmount和unmounted）。

6.1 beforeDestroy / beforeUnmount：最后的清理机会

beforeDestroy在组件实例销毁之前调用。在这一步，实例仍然完全可用，this仍然可以访问所有数据、方法和DOM。

这是你进行清理工作的最后也是最佳时机。所有需要手动清理的资源都应该在这里处理：

1. 清除定时器：这是最常见的内存泄漏来源。

   beforeDestroy() { if (this.intervalId) { clearInterval(this.intervalId); this.intervalId = null; } if (this.timeoutId) { clearTimeout(this.timeoutId); this.timeoutId = null; } }

2. 解绑全局或自定义事件：如果在mounted或其他地方用addEventListener绑定了事件，必须在这里用removeEventListener解绑。

   beforeDestroy() { window.removeEventListener('resize', this.handleResize); eventBus.$off('some-event', this.eventHandler); // 如果使用了事件总线 }

3. 取消未完成的异步请求：如果使用了如Axios的CancelToken，可以在这里取消请求，避免组件销毁后回调函数还在试图更新不存在的组件状态。

   beforeDestroy() { if (this.cancelToken) { this.cancelToken.cancel('Component destroyed.'); } }

4. 销毁第三方库实例：例如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与deactivated

<keep-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 }; } };

关键变化与优势：

1. setup()替代了beforeCreate和created：setup()函数在组件实例创建之初、beforeCreate之后、created之前执行。因此，在setup()函数体内同步执行的代码，其执行时机就等同于created钩子。beforeCreate在Composition API中几乎没有使用场景。
2. 更好的代码组织：相关的逻辑（数据、计算属性、生命周期、方法）可以组织在一起，而不是分散在data、methods、created等不同选项中。
3. 更灵活的逻辑复用：生命周期逻辑可以轻松地封装到独立的组合式函数（composable）中。

8.2 生命周期钩子对照表与细节差异

下表清晰地展示了Options API与Composition API生命周期钩子的对应关系：

一个重要的细节差异：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组件的“一生”有一个透彻的理解。在实际开发中，多思考“这段代码应该放在哪个生命周期？为什么？”，你的代码架构能力会得到显著的提升。