面试题：第一次加载 Vue 页面时会触发哪些生命周期钩子？

在 Vue 中，第一次加载页面时，会触发一系列生命周期钩子。这些钩子按照特定的顺序执行，用于完成组件的初始化、挂载和渲染等操作。以下是第一次加载页面时触发的生命周期钩子及其顺序：

---

1. beforeCreate

• 触发时机：在实例初始化之后，数据观测（data）和事件/侦听器配置之前。
• 特点：
  • 此时组件的 data、methods、computed 等选项还未初始化。
  • 无法访问组件的数据和方法。
• 用途：通常用于一些与数据无关的初始化操作。

---

2. created

• 触发时机：在实例创建完成后，数据观测（data）和事件/侦听器配置已完成。
• 特点：
  • 此时可以访问组件的 data、methods、computed 等选项。
  • 但 DOM 还未生成，无法访问 this.$refs。
• 用途：常用于发起异步请求、初始化数据等操作。

---

3. beforeMount

• 触发时机：在挂载开始之前，即模板编译完成，但尚未将组件挂载到 DOM 中。
• 特点：
  • 此时组件的模板已经编译完成，但还未插入到 DOM 中。
  • 无法访问 DOM 元素。
• 用途：较少使用，适合在挂载前执行一些逻辑。

---

4. mounted

• 触发时机：在组件挂载到 DOM 后触发。
• 特点：
  • 此时组件已经挂载到 DOM 中，可以访问 DOM 元素（如 this.$refs）。
  • 组件的初始渲染已完成。
• 用途：常用于操作 DOM、初始化第三方库（如图表库、地图库）等。

---

5. beforeUpdate（仅在数据变化时触发）

• 触发时机：在数据变化导致 DOM 重新渲染之前触发。
• 特点：
  • 第一次加载页面时不会触发，只有在数据变化导致 DOM 更新时才会触发。
• 用途：适合在更新前获取 DOM 的当前状态。

---

6. updated（仅在数据变化时触发）

• 触发时机：在数据变化导致 DOM 重新渲染之后触发。
• 特点：
  • 第一次加载页面时不会触发，只有在数据变化导致 DOM 更新时才会触发。
• 用途：适合在更新后操作 DOM。

---

7. beforeDestroy（仅在组件销毁时触发）

• 触发时机：在组件销毁之前触发。
• 特点：
  • 第一次加载页面时不会触发，只有在组件销毁时才会触发。
• 用途：适合执行清理操作，如清除定时器、取消事件监听等。

---

8. destroyed（仅在组件销毁时触发）

• 触发时机：在组件销毁之后触发。
• 特点：
  • 第一次加载页面时不会触发，只有在组件销毁时才会触发。
• 用途：适合执行最终的清理操作。

---

总结

在第一次加载 Vue 页面时，触发的生命周期钩子顺序为：

1. beforeCreate
2. created
3. beforeMount
4. mounted

这些钩子用于完成组件的初始化、数据观测、模板编译和挂载等操作。beforeUpdate 和 updated 只有在数据变化时才会触发，而 beforeDestroy 和 destroyed 只有在组件销毁时才会触发。