Vue 组件生命周期实战：父子组件挂载、更新与销毁顺序全解析

快速概述

Vue 组件生命周期是组件从创建、挂载、更新到销毁所经历的一系列阶段，每个阶段对应特定的钩子函数。理解父子组件的生命周期执行顺序，能帮助开发者解决数据初始化时机、DOM 操作安全、资源释放等核心问题。本文适用于使用 Vue 2 或 Vue 3 的开发者，前置环境要求为已安装 Node.js 与 Vue CLI 或 Vite 构建工具。

核心概念与原理

Vue 生命周期分为创建、挂载、更新、销毁四个主要阶段，共 8 个钩子函数：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy（Vue 3 中为 beforeUnmount）、destroyed（Vue 3 中为 unmounted）。生命周期钩子会在组件生命周期的各个不同阶段被调用，例如 mounted 函数会在组件挂载完成后被调用。父子组件的执行顺序遵循“父组件先创建，子组件先挂载”的递归规律：父组件 beforeCreate → 父组件 created → 父组件 beforeMount → 子组件 beforeCreate → 子组件 created → 子组件 beforeMount → 子组件 mounted → 父组件 mounted。

实战步骤与代码

步骤 1：创建父子组件

首先创建一个子组件 Child.vue，在组合式 API 中使用 onMounted 等钩子函数：

// Child.vue
<script setup>
import { onMounted, onUpdated, onUnmounted } from 'vue'
onMounted(() => { console.log('子组件 mounted') })
onUpdated(() => { console.log('子组件 updated') })
onUnmounted(() => { console.log('子组件 unmounted') }) </script>
<template> <div>子组件内容</div> </template>

步骤 2：创建父组件并引入子组件

// Parent.vue
<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'
import Child from './Child.vue'
const showChild = ref(true) const count = ref(0)
onMounted(() => { console.log('父组件 mounted') })
onUpdated(() => { console.log('父组件 updated') })
onUnmounted(() => { console.log('父组件 unmounted') }) </script>
<template> <div> <button @click="count++">更新父组件</button> <button @click="showChild = !showChild">切换子组件</button> <Child v-if="showChild" /> </div> </template>

步骤 3：观察控制台输出顺序

运行项目后，控制台输出顺序为：父组件 mounted → 子组件 mounted。当点击“更新父组件”按钮时，输出顺序为：父组件 updated → 子组件 updated。当点击“切换子组件”按钮隐藏子组件时，输出顺序为：子组件 unmounted → 父组件 updated。

常见坑点与优化

• 在 created 中操作 DOM：created 阶段 DOM 尚未挂载，此时访问 this.$el 会得到 undefined，应使用 mounted 钩子进行 DOM 操作。
• 异步数据未清理：在组件销毁前未取消定时器或未解绑事件监听，会导致内存泄漏。应在 beforeUnmount 或 unmounted 钩子中执行清理操作。
• 过度使用 updated：updated 钩子会在每次数据变化后触发，若在其中修改响应式数据，容易造成死循环。建议仅在必要时使用，并配合条件判断。
• 性能优化建议：将频繁变化的数据与静态数据分离，使用 v-once 指令标记不需要更新的静态内容，减少不必要的组件更新开销。