Vue3生命周期钩子详解

# 第一章：Vue3生命周期钩子概述

## 1.1 什么是Vue3生命周期钩子

在Vue3中，生命周期钩子是一组可以让我们在Vue实例化过程中插入自定义逻辑的钩子函数。它们允许我们在Vue实例的生命周期的不同阶段执行自定义代码。

## 1.2 Vue3生命周期钩子的作用

Vue3生命周期钩子的作用在于允许开发者在实例生命周期的不同阶段执行操作，比如在实例创建前后执行逻辑、在数据渲染到页面前后执行操作等。

## 1.3 Vue3生命周期钩子的分类

Vue3生命周期钩子可以分为创建前、创建后、挂载前、挂载后、更新前、更新后、卸载前、卸载后等不同阶段的钩子函数。这些钩子函数为开发者提供了丰富的扩展能力，使其能够更加灵活地处理业务逻辑。
## 第二章：Vue3生命周期钩子详解

Vue3生命周期钩子是Vue实例在特定阶段会自动调用的函数钩子，用于执行自定义逻辑或操作。Vue3生命周期钩子的详细执行顺序以及各个钩子的具体作用对于开发者来说非常重要。本章将深入探讨Vue3生命周期钩子的执行顺序和各个钩子的具体功能。

### 2.1 Vue3生命周期钩子的具体执行顺序

Vue3生命周期钩子的具体执行顺序如下：

1. `beforeCreate`: 在实例初始化之后，数据观测和事件配置之前被调用。
2. `created`: 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
3. `beforeMount`: 在挂载开始之前被调用：相关的render函数首次被调用。
4. `mounted`: 实例已经挂载到DOM上后调用，这个钩子在服务器端渲染期间不被调用。
5. `beforeUpdate`: 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
6. `updated`: 由于数据更改导致的虚拟DOM重新渲染和打补丁后调用。
7. `beforeUnmount`: 在实例销毁之前调用。在此时，实例仍然完全可用。
8. `unmounted`: 在Vue实例销毁后调用。

### 2.2 beforeCreate和created钩子

这两个钩子是实例创建阶段的钩子，分别在实例初始化之后、数据观测和事件配置之前以及实例创建完成后被调用。以下是这两个钩子的示例代码：

// Vue 3示例代码

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  beforeCreate() {
    console.log('beforeCreate钩子被调用');
    console.log('data.message: ', this.message); // 输出：undefined
  },
  created() {
    console.log('created钩子被调用');
    console.log('data.message: ', this.message); // 输出：Hello, Vue3!
  }
})

app.mount('#app');

**代码说明**：
- 在`beforeCreate`钩子中，实例已创建，但`data`中的数据还不可见，因此`this.message`输出为`undefined`。
- 在`created`钩子中，实例创建完成，`data`中的数据可以被访问，因此`this.message`输出为`Hello, Vue3!`。

**结果说明**：
- 控制台输出：