Vue 生命周期全解：从创建到销毁的完整流程与实战作用

一、Vue 生命周期全解：从创建到销毁的完整流程与实战作用

1.1 什么是 Vue 的生命周期

Vue 的生命周期是指一个 Vue 实例从创建到销毁的全过程。这个过程就像是一个人的生老病死，每个阶段都会自动触发特定的钩子函数。掌握这些钩子函数，我们可以精准地控制代码在组件不同阶段的执行时机，从而更好地管理数据、操作 DOM 以及处理副作用。

1.2 生命周期流程图

下图展示了 Vue 3 中组件从创建到销毁的完整流程，清晰地展示了各个钩子的执行顺序。

#publish-mermaid-1785344496186-0{font-family:inherit;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785344496186-0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785344496186-0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785344496186-0 .error-icon{fill:#552222;}#publish-mermaid-1785344496186-0 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785344496186-0 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785344496186-0 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785344496186-0 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785344496186-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785344496186-0 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785344496186-0 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785344496186-0 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785344496186-0 .marker.cross{stroke:#333333;}#publish-mermaid-1785344496186-0 svg{font-family:inherit;font-size:16px;}#publish-mermaid-1785344496186-0 p{margin:0;}#publish-mermaid-1785344496186-0 .label{font-family:inherit;color:#333;}#publish-mermaid-1785344496186-0 .cluster-label text{fill:#333;}#publish-mermaid-1785344496186-0 .cluster-label span{color:#333;}#publish-mermaid-1785344496186-0 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785344496186-0 .label text,#publish-mermaid-1785344496186-0 span{fill:#333;color:#333;}#publish-mermaid-1785344496186-0 .node rect,#publish-mermaid-1785344496186-0 .node circle,#publish-mermaid-1785344496186-0 .node ellipse,#publish-mermaid-1785344496186-0 .node polygon,#publish-mermaid-1785344496186-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785344496186-0 .rough-node .label text,#publish-mermaid-1785344496186-0 .node .label text,#publish-mermaid-1785344496186-0 .image-shape .label,#publish-mermaid-1785344496186-0 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785344496186-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785344496186-0 .rough-node .label,#publish-mermaid-1785344496186-0 .node .label,#publish-mermaid-1785344496186-0 .image-shape .label,#publish-mermaid-1785344496186-0 .icon-shape .label{text-align:center;}#publish-mermaid-1785344496186-0 .node.clickable{cursor:pointer;}#publish-mermaid-1785344496186-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785344496186-0 .arrowheadPath{fill:#333333;}#publish-mermaid-1785344496186-0 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785344496186-0 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785344496186-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785344496186-0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785344496186-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785344496186-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785344496186-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785344496186-0 .cluster text{fill:#333;}#publish-mermaid-1785344496186-0 .cluster span{color:#333;}#publish-mermaid-1785344496186-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:inherit;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785344496186-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785344496186-0 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785344496186-0 .icon-shape,#publish-mermaid-1785344496186-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785344496186-0 .icon-shape p,#publish-mermaid-1785344496186-0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785344496186-0 .icon-shape .label rect,#publish-mermaid-1785344496186-0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785344496186-0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785344496186-0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785344496186-0 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785344496186-0 [data-look=\”neo\”].node rect,#publish-mermaid-1785344496186-0 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785344496186-0 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344496186-0 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785344496186-0 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785344496186-0 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344496186-0 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785344496186-0 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344496186-0 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785344496186-0 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344496186-0 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344496186-0 :root{–mermaid-font-family:inherit;}

开始

beforeCreate: 实例初始化前

created: 实例创建完成

beforeMount: 模板编译挂载前

mounted: DOM 挂载完成

beforeUpdate: 数据更新前

updated: 数据更新后

beforeUnmount: 组件卸载前

unmounted: 组件已销毁

结束

1.3 生命周期的作用与核心场景

生命周期的核心作用在于“分时”，即在组件的特定时间窗口做特定的事。

1.3.1 初始化阶段：数据的准备

• beforeCreate：此时实例刚创建，data 和 methods 还未初始化，无法访问数据或 DOM。通常不在此处进行操作。
• created：此时 data 和 methods 已就绪，但 DOM 还未生成。适合在此处发起异步请求（如获取用户信息、初始化配置）。

1.3.2 挂载阶段：DOM 的构建

• beforeMount：虚拟 DOM 已构建完成，但尚未渲染到页面。
• mounted：此时真实的 DOM 已挂载完毕。适合进行 DOM 操作（如操作第三方库、计算元素尺寸）或添加全局事件监听。

1.3.3 更新阶段：数据的响应式处理

• beforeUpdate：当 data 发生变化时触发，但 DOM 还未更新。适合在更新前做一些校验或重置操作。
• updated：DOM 已经根据 data 的变化完成了更新。适合进行后续的 DOM 操作，但需注意避免在内部再次修改 data 导致死循环。

1.3.4 销毁阶段：资源的清理

• beforeUnmount：在组件销毁前触发。适合进行最后的清理工作，如清除定时器、解绑全局事件。
• unmounted：组件实例已被销毁。此时组件的所有指令和事件监听器都已被移除，清理完毕。

1.4 Vue 2 与 Vue 3 的生命周期变化

在 Vue 3 中，为了更符合逻辑和 TypeScript 的类型推断，部分钩子函数的名称发生了变化。

• Vue 2：使用 destroyed 钩子。
• Vue 3：使用 unmounted 钩子，语义更明确（组件被卸载了，而不是被销毁了）。

• Vue 2：beforeDestroy
• Vue 3：beforeUnmount

• Vue 2：mounted
• Vue 3：onMounted (在 Composition API 中)
• Vue 3：mounted (在 Options API 中)

1.5 总结

生命周期是 Vue 开发者的必修课。合理使用 created 加载数据，mounted 操作 DOM，beforeUnmount 清理资源，能让应用更加健壮高效。