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

快速概述

在 Vue 应用中，理解父子组件的生命周期执行顺序对于处理数据初始化、异步请求和 DOM 操作至关重要。本文旨在解决开发者常遇到的“子组件数据未就绪”“挂载顺序混乱”等问题，适用于使用 Vue 3（含组合式 API 与选项式 API）开发中大型应用的场景。前置环境要求：Node.js 16+、Vue 3.x 及 Vue CLI 或 Vite 构建工具。

核心概念与原理

Vue 组件的生命周期钩子（如 onMounted、onUpdated）在组件创建、挂载、更新和销毁的不同阶段被调用。父子组件并非独立运行，而是遵循“父组件先创建，子组件先挂载”的递归机制。具体而言，父组件的 beforeMount 触发后，会先完成所有子组件的挂载（子组件的 mounted 先执行），最后才执行父组件的 mounted。更新阶段同理，父组件更新前会先更新子组件，确保子组件状态同步。

实战步骤与代码

步骤 1：创建父子组件

使用组合式 API 创建两个组件，并在父组件中引入子组件。

// Child.vue
<script setup>
import { onMounted, onUpdated } from 'vue'
onMounted(() => console.log('子组件挂载完成')) onUpdated(() => console.log('子组件更新完成')) </script>
<template> <div>子组件内容</div> </template>

// Parent.vue <script setup> import { ref, onMounted, onUpdated } from 'vue' import Child from './Child.vue'

const count = ref(0)
onMounted(() => console.log('父组件挂载完成')) onUpdated(() => console.log('父组件更新完成')) </script>
<template> <button @click="count++">更新</button> <Child /> </template>

步骤 2：观察控制台输出

首次加载时，控制台依次输出：子组件挂载完成 → 父组件挂载完成。点击按钮触发更新时，输出顺序为：子组件更新完成 → 父组件更新完成。这一顺序确保了父组件在挂载时能安全访问子组件实例，更新时子组件数据已同步。

步骤 3：在挂载阶段发起异步请求

推荐在 onMounted 中获取数据，此时 DOM 已渲染，可安全操作。若需在父组件中等待子组件数据，可通过 ref 获取子组件实例并调用其暴露的方法。

常见坑点与优化

• 坑点 1：在 created 中访问 DOM：此时 DOM 未挂载，访问会得到 null。应使用 onMounted。
• 坑点 2：父组件更新时子组件未同步：若在父组件的 updated 中读取子组件 DOM，可能因顺序问题导致数据滞后。建议使用 nextTick 等待本轮更新完成。
• 优化建议：避免在 updated 中执行重操作，防止无限更新循环。对于频繁更新的数据，使用 computed 或 watch 进行缓存与节流，减少不必要的渲染开销。