从诞生到离别

Vue组件的生命之旅：从诞生到离别

组件生命周期：数字世界的"生老病死"

Vue组件的生命周期是组件从创建到销毁的整个过程，Vue框架在这个过程的关键时刻提供了生命周期钩子函数，让开发者能够在特定阶段执行自定义代码。组件生命周期主要分为三个阶段：初始化阶段、更新阶段和销毁阶段。

🌱 生活类比：想象一个人的一生

• 初始化阶段 = 人的出生与成长（从孕育到成年）
• 更新阶段 = 人的生活变化（搬家、换工作、结婚等）
• 销毁阶段 = 人的离世与告别（交代后事、离开人世）

┌─────────────────────────────────────────────────────┐
│               Vue组件生命周期三大阶段                │
├─────────────────────┬───────────────────────────────┤
│ 初始化阶段          │ 组件创建、DOM渲染、挂载到页面  │
├─────────────────────┼───────────────────────────────┤
│ 更新阶段            │ 数据变化、DOM重新渲染          │
├─────────────────────┼───────────────────────────────┤
│ 销毁阶段            │ 组件移除、资源释放             │
└─────────────────────┴───────────────────────────────┘

完整生命周期流程图

组件实例创建
      │
      ▼
┌──────────────────┐
│  setup()         │ ◀── 组合式API入口
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  onBeforeMount   │ ◀── 挂载前
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  DOM渲染         │ ◀── 虚拟DOM渲染为实际DOM
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  onMounted       │ ◀── 挂载后
└────────┬─────────┘
         │
         │  ┌─── 数据更新 ────┐
         │  │                 │
         │  ▼                 │
         │┌──────────────────┐│
         ││ onBeforeUpdate   ││ ◀── 更新前
         │└────────┬─────────┘│
         │         │          │
         │         ▼          │
         │┌──────────────────┐│
         ││ DOM重新渲染      ││
         │└────────┬─────────┘│
         │         │          │
         │         ▼          │
         │┌──────────────────┐│
         ││ onUpdated        ││ ◀── 更新后
         │└────────┬─────────┘│
         │         │          │
         └─────────┘          │
                   │          │
                   │          │
                   │          │
         ┌─────────▼──────────┘
         │
         ▼
┌──────────────────┐
│ onBeforeUnmount  │ ◀── 卸载前
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│ DOM移除          │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│ onUnmounted      │ ◀── 卸载后
└──────────────────┘

1. 初始化阶段：组件的"出生与成长"

初始化阶段包含组件实例的创建到DOM渲染完成的全过程，关键钩子函数是onBeforeMount和onMounted。

onBeforeMount - 万事俱备，只欠东风

onBeforeMount钩子函数在组件DOM树创建之前被调用，此时虚拟DOM已经创建完成，但还没有被渲染到页面上。适合执行一些与DOM无关的初始化工作。

🏗️ 生活类比：房屋建设

• 建筑图纸已经设计好（虚拟DOM已创建）
• 但实际建筑还没开始施工（真实DOM未渲染）
• 可以做一些施工前的准备工作

import {
   
    onBeforeMount, ref } from 'vue'

export default {
   
   
  setup() {
   
   
    const dataReady = ref(false)
    
    onBeforeMount(() => {
   
   
      console.log('组件即将挂载')
      // 初始化一些与DOM无关的数据或状态
      dataReady.value = true
      
      // 可以进行一些初始化设置，但还不能访问DOM
      console.log('DOM元素是否可访问?', document.querySelector('.my-component') === null)
      // 输出: DOM元素是否可访问? true (因为此时DOM还未渲染)
      
      // 适合进行不依赖DOM的准备工作
      // 例如：初始化状态、设置环境变量等
    })
    
    return {
   
    dataReady }
  }
}

onMounted - 粉墨登场，正式亮相

onMounted钩子函数在组件DOM挂载完成后调用，此时真实DOM已经渲染完成，可以安全地进行DOM操作、发送网络请求、添加事件监听器等操作。这是初始化阶段最常用的生命周期钩子。

🎭 生活类比：演员登台

• 舞台布置完成（DOM已渲染）
• 演员正式亮相（组件可见）
• 开始表演互动（可以操作DOM，与用户交互）

import {
   
    onMounted, ref } from 'vue'

export default {
   
   
  setup() {
   
   
    const chartRef = ref(null)
    const chartInstance = ref(null)
    const loading = ref(true)
    const data = ref([])
    
    onMounted(async () => {
   
   
      console.log('组件已挂载')
      
      // 1. DOM操作
      const element = document.querySelector('.my-component')
      console.log('DOM元素现在可访问'