在 Vue.js 中，当页面或组件第一次加载时，会触发一系列的生命周期钩子。特别是关于首次加载的，主要的几个钩子函数是 beforeCreate、created、beforeMount、mounted。
以下是一个简单的 Vue 组件示例，其中包含了这些钩子函数：
javascript`<template>
<div>
<p>Hello, Vue!</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
message: 'Hello from data!'
}
},
beforeCreate() {
console.log('beforeCreate 钩子被触发')
console.log('此时无法访问 data 中的数据或 methods 中的方法')
// 这里 data 中的数据还没被创建和初始化
// 也不能访问到 DOM 元素
},
created() {
console.log('created 钩子被触发')
console.log('此时可以访问 data 中的数据，但无法访问 DOM 元素')
console.log(this.message) // 可以访问到 data 中的数据
// 但此时模板还没有被编译成 HTML，所以无法访问 DOM 元素
},
beforeMount() {
console.log('beforeMount 钩子被触发')
console.log('此时模板已经被编译成 HTML，但还没有被挂载到页面上')
// 这里虽然无法直接访问 DOM 元素，但可以使用 document.querySelector 或类似的方法来查找 DOM
},
mounted() {
console.log('mounted 钩子被触发')
console.log('此时模板已经被编译并挂载到页面上')
console.log(this.$el) // 可以访问到挂载的 DOM 元素
// 在这里可以进行 DOM 操作，也可以发起网络请求等
}
}
</script>`
在这个示例中，当 MyComponent 组件首次被加载时，这些钩子函数会按照上述顺序被触发。你可以看到，每个钩子函数都负责处理组件生命周期的不同阶段。