关键词：vue 钩子出发

在 Vue.js 中，页面首次加载时，会按照以下顺序触发一系列的生命周期钩子：

1. beforeCreate: 实例刚在内存中被创建时调用，此时还未初始化响应式数据和事件。

2. created: 实例创建完成后被调用，此时已完成数据观测（即数据响应式）、属性和方法的运算，$el属性还未显示出来。

3. beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用。此时 $el 属性还未被创建。

4. mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素，当 mounted 被调用时，组件已经在文档内。

在这个过程中，beforeCreate 和 created 钩子在服务端渲染过程中也会被调用，而 beforeMount 和 mounted 只会在客户端被调用。需要特别注意的是，mounted 不会保证所有的子组件也都一起被挂载。如果你希望等待整个视图都渲染完毕，可以在 mounted 钩子内部使用 Vue.nextTick 或 vm.$nextTick。

简而言之，首次加载页面时，Vue 会按顺序触发 beforeCreate, created, beforeMount, 和 mounted 生命周期钩子。这些钩子提供了在不同阶段介入组件行为的机会，使得我们可以执行如访问数据、修改 DOM 等操作。