作为 Vue3 系列的第八篇文章，本文将重点解析 Vue3 中组件的生命周期机制。理解生命周期，就如同观察一个人从诞生、成长、经历变迁到最终退出的过程，每个阶段都承载着独特的职责与意义。掌握这些关键节点，有助于我们在恰当的时机执行必要的逻辑，从而开发出更高效、更稳定的 Vue 应用程序。

一、深入理解组件生命周期

以人生阶段类比组件生命周期

为了更直观地理解组件的生命周期，我们可以将其比作人类的生命历程：

出生阶段（创建）
组件刚刚被实例化，类似于婴儿初临人世。此时它已具备基本结构和能力，但尚未出现在页面中，也无法与用户产生交互。

成长阶段（挂载）
这一时期相当于个体开始融入社会。组件被插入 DOM 树中，正式进入可视区域，能够渲染内容并响应用户操作，如同孩子入学、结识同伴、参与活动。

变化阶段（更新）
人生充满变数，如职业转换、技能提升等；同样，当组件内部的数据发生变化时，它会触发重新渲染，以展示最新的状态信息。

离别阶段（卸载）
生命终有尽头，组件亦然。当其不再被需要时，将被销毁，并释放所占用的内存资源，移除事件监听，为彻底退出做准备。

组件四大核心生命周期阶段

• 创建阶段（Creation）：组件实例初始化完成，但尚未挂载至 DOM。
• 挂载阶段（Mounting）：组件被渲染并插入到真实 DOM 中，开始与用户交互。
• 更新阶段（Updating）：数据变更引发视图重绘，确保界面与状态同步。
• 卸载阶段（Unmounting）：组件被移除前进行清理工作，防止内存泄漏。

在特定时刻执行特定操作的价值

生命周期的本质在于精准控制代码执行时机，就像人在不同人生阶段做出关键决策：

• 出生时：准备生存所需的基本条件
• 求学时：积累知识与能力
• 工作时：发挥价值创造成果
• 退休时：总结过往，妥善收尾

在组件开发中，我们通过生命周期钩子实现：

• 在创建时初始化数据模型
• 在挂载完成后访问或操作 DOM 元素
• 在更新前后处理业务逻辑
• 在卸载前清除定时器、解绑事件等资源

<script setup>

二、Vue2 生命周期详解

创建阶段：beforeCreate() 与 created()

以下是一个简单的计数器组件示例，用于演示 Vue2 的生命周期行为：

<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

接下来，我们在该组件中加入创建阶段的两个生命周期钩子函数：

<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  // 创建阶段开始 - 组件实例刚被创建
  beforeCreate() {
    console.log('beforeCreate - 组件实例刚创建')
    console.log('数据 count:', this.count) // undefined
    console.log('方法 increment:', this.increment) // undefined
  },

  // 创建阶段完成 - 数据观测和事件配置已完成
  created() {
    console.log('created - 数据观测已完成')
    console.log('数据 count:', this.count) // 0
    console.log('方法 increment:', this.increment) // 函数
  },

  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

创建阶段详细说明

beforeCreate()

• 触发时机：组件实例刚刚被创建后立即调用
• 当前状态：data 和 methods 尚未初始化，无法访问
• 典型用途：多用于插件开发或全局前置处理，常规业务中使用较少

created()

• 触发时机：组件实例创建完毕，数据代理和方法绑定已完成
• 当前状态：可访问 data、methods、computed 等选项，但模板尚未编译，DOM 节点还未生成
• 典型用途：适合发起异步请求、初始化数据、设置初始状态等无需操作 DOM 的任务

挂载阶段：beforeMount() 与 mounted()

接下来我们深入分析挂载阶段的两个关键生命周期钩子函数：

<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  // 挂载阶段开始 - 模板编译完成，即将挂载到 DOM
  beforeMount() {
    console.log('beforeMount - 模板编译完成，即将挂载')
    console.log('DOM 元素:', this.$el) // undefined，因为还没挂载
  },
  // 挂载阶段完成 - 组件已挂载到 DOM
  mounted() {
    console.log('mounted - 组件已挂载到 DOM')
    console.log('DOM 元素:', this.$el) // 实际的 DOM 元素
    console.log('计数元素:', this.$el.querySelector('p').textContent)
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<script setup>

关于 beforeMount()

• 时机：在组件挂载开始前触发，此时模板已完成编译
• 状态：虚拟 DOM 已生成，但尚未转化为真实 DOM 节点
• 用途：适合执行首次渲染前的最终准备工作

关于 mounted()

• 时机：组件已成功挂载至真实 DOM 后调用
• 状态：组件完全初始化完毕，可安全访问 $el 和其他 DOM 元素
• 用途：常用于初始化第三方插件、设置定时器、绑定事件监听等需要操作 DOM 的场景

这一阶段好比个体步入社会，获得了与外部世界互动的能力，可以真正施展其功能。

更新阶段：beforeUpdate() 与 updated()

当组件内部响应式数据发生变化时，将触发更新周期。以下代码展示了该过程：

<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  // 更新阶段开始 - 数据变化，虚拟 DOM 重新渲染之前
  beforeUpdate() {
    console.log('beforeUpdate - 数据已变化，即将重新渲染')
    console.log('当前计数:', this.count)
    console.log('DOM 内容:', this.$el.querySelector('p').textContent)
  },
  // 更新阶段完成 - 虚拟 DOM 已重新渲染并更新到真实 DOM
  updated() {
    console.log('updated - 组件已更新')
    console.log('当前计数:', this.count)
    console.log('DOM 内容:', this.$el.querySelector('p').textContent)
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

beforeDestroy

beforeUpdate() 解析

• 时机：响应式数据变更后，虚拟 DOM 重新渲染前执行
• 状态：数据已是最新值，但视图尚未更新
• 用途：可用于记录旧状态或执行更新前的逻辑处理

updated() 解析

• 时机：虚拟 DOM 重新渲染且页面已更新完成后调用
• 状态：DOM 结构已同步反映最新的数据状态
• 用途：适用于依赖最新 DOM 布局的操作，例如元素尺寸测量或滚动位置调整

此阶段象征着人在生活中持续学习与成长，不断适应新环境与挑战的过程。

销毁阶段：beforeDestroy() 与 destroyed()

当组件被移除不再使用时，会进入销毁流程：

<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
<button @click="$destroy()">销毁组件</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

onBeforeUnmount

beforeDestroy() 特点

• 时机：在实例被销毁之前调用
• 状态：组件仍处于完全可用状态，所有指令、事件监听依然有效
• 用途：清理工作首选阶段，如取消定时器、解绑全局事件、销毁手动创建的 DOM 节点等

destroyed() 特点

• 时机：组件已被完全销毁后触发
• 状态：所有与实例相关的绑定已被解除，DOM 已从页面中移除（若未被复用）
• 用途：作为最终确认点，验证资源是否释放完毕

这个阶段类似于人生旅程的结束，所有的职责和联系都被逐步解除，系统资源得以回收。

<script setup>
import { ref, onBeforeMount, onMounted } from 'vue'

const count = ref(0)
const increment = () => {
  count.value++
}

// 挂载前钩子
onBeforeMount(() => {
  console.log('onBeforeMount - 即将挂载到 DOM')
  console.log('DOM 元素还未可用')
})

// 挂载后钩子
onMounted(() => {
  console.log('onMounted - 已挂载到 DOM')
  console.log('现在可以操作 DOM 元素')
  const countElement = document.querySelector('p')
  console.log('计数元素:', countElement.textContent)
})
</script>

<template>
  <div>
    <p>计数: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>

Vue3 的挂载阶段提供了以函数形式调用的生命周期钩子，主要包括 `onBeforeMount()` 和 `onMounted()`。这些钩子通过组合式 API 显式导入并使用，提升了代码的可读性和逻辑组织性。 - **onBeforeMount()** 触发时机：在组件挂载到 DOM 树之前执行。 当前状态：模板尚未渲染，真实 DOM 节点还未创建，因此无法访问或操作页面元素。 - **onMounted()** 触发时机：组件已插入文档，完成首次渲染后调用。 当前状态：所有模板内容已渲染成 DOM，可通过原生方法（如 `document.querySelector`）获取节点并进行交互操作。 这一阶段适合执行依赖于 DOM 的初始化任务，例如设置定时器、发起数据请求、绑定第三方插件等。

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => {
  count.value++
}

// 在 Vue3 的 <script setup> 中，顶层代码会立即执行
console.log('这相当于在 created 阶段执行')
console.log('数据 count:', count.value)
console.log('方法 increment:', increment)
</script>

<template>
  <div>
    <p>计数: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

在 Vue3 的组合式 API 中，`setup` 函数取代了 Vue2 中的 `beforeCreate` 与 `created` 两个钩子。其执行时机处于实例初始化之后、挂载开始之前，即介于 `beforeCreate` 和 `created` 之间。 由于 `