第一次加载页面会触发哪几个钩子函数

一、Vue 2 生命周期钩子函数执行顺序

首次页面加载时，钩子函数按以下顺序触发：

1. 创建阶段（实例初始化）

• beforeCreate()

  • 触发时机：实例刚被创建，尚未初始化 data 和 methods。
  • 应用场景：可在此阶段添加自定义事件，但无法访问 this.data。

• created()

  • 触发时机：实例已完成数据观测（data 和 methods 已初始化），但未开始渲染 DOM。
  • 应用场景：常用于发送 API 请求、初始化非 DOM 相关数据。

2. 挂载阶段（DOM 渲染）

• beforeMount()

  • 触发时机：render 函数已生成虚拟 DOM，但尚未将真实 DOM 插入页面。
  • 应用场景：可在此阶段获取虚拟 DOM 结构，但无法操作真实 DOM。

• mounted()

  • 触发时机：组件已挂载到真实 DOM 中，页面完成渲染。
  • 应用场景：常用于操作真实 DOM（如初始化第三方库、绑定事件监听）、发送依赖 DOM 结构的 API 请求。

3. 首次加载完整流程示例

export default {
  beforeCreate() {
    console.log('beforeCreate'); // 第一个触发
  },
  created() {
    console.log('created'); // 第二个触发
  },
  beforeMount() {
    console.log('beforeMount'); // 第三个触发
  },
  mounted() {
    console.log('mounted'); // 第四个触发，首次加载完成
  }
}

二、Vue 3 生命周期钩子函数的变化与执行顺序

Vue 3 中钩子函数名称和使用方式有调整，首次加载触发顺序如下：

1. 组合式 API（setup 语法糖）中的钩子函数

• setup()

  • 触发时机：组件初始化阶段，早于所有生命周期钩子。
  • 注意：Vue 3 组合式 API 中需通过 onXXX 函数注册生命周期钩子。

• onBeforeMount()

  • 对应 Vue 2 的 beforeMount，触发时机相同。

• onMounted()

  • 对应 Vue 2 的 mounted，触发时机相同。

2. 选项式 API 中的兼容性钩子

• beforeCreate、created、beforeMount、mounted
  • 功能与 Vue 2 一致，可在 Vue 3 中继续使用，但推荐优先使用组合式 API 的 onXXX 函数。

3. Vue 3 组合式 API 示例

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

console.log('setup 执行'); // 第一个触发

onBeforeMount(() => {
  console.log('onBeforeMount'); // 第二个触发
});

onMounted(() => {
  console.log('onMounted'); // 第三个触发，首次加载完成
});
</script>

三、问题

1. 问：Vue 2 首次加载时钩子函数的执行顺序是怎样的？

• 答：
  依次触发 beforeCreate → created → beforeMount → mounted。其中，mounted 钩子表示组件已完全挂载到 DOM，此时可操作真实 DOM 或发起依赖 DOM 结构的请求。

2. 问：Vue 3 中如何使用生命周期钩子？与 Vue 2 有何区别？

• 答：
  • 组合式 API：通过 onXXX 函数注册钩子（如 onMounted），需在 setup 中使用；
  • 选项式 API：保留 beforeCreate 等钩子，用法与 Vue 2 一致，但推荐使用组合式 API；
  • 最大区别：Vue 3 组合式 API 将生命周期逻辑与数据逻辑整合在 setup 中，更符合 Composition API 的设计思想。

3. 问：created 和 mounted 钩子的主要区别是什么？

• 答：
  • created：DOM 尚未渲染，可访问 data 和 methods，适合初始化数据或发送不依赖 DOM 的请求；
  • mounted：DOM 已渲染完成，可操作真实 DOM（如获取元素尺寸、初始化图表库），或发送依赖 DOM 结构的请求。