Note 5

数据和生命周期初始化顺序

beforeCreate 钩子函数执行 → data 中的数据初始化 → created 钩子函数执行。

更具体的过程是：beforeCreate 被调用时，data 中的数据还未被初始化（无法访问）；之后，· 才会对 data 进行响应式处理，此时数据才准备就绪。

💡 核心要点与验证

1. 在 beforeCreate 中，你无法访问到 data、methods、computed 中的任何内容。这时 this 上的这些选项都还未被创建。
2. data 的初始化发生在 beforeCreate 之后，created 之前。具体来说，它位于上图所示的内部初始化链条中。只有当这个过程完成后，数据才是响应式的。
3. created 是你可以最早安全操作 data 中数据的生命周期钩子。

你可以通过下面的代码轻松验证这个顺序：

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  beforeCreate() {
    // 尝试访问 data
    console.log('beforeCreate 中访问 data:', this.message) // 输出: undefined
    // 尝试访问 methods
    console.log('beforeCreate 中访问 method:', this.sayHello) // 输出: undefined
  },
  created() {
    // 此时可以安全访问
    console.log('created 中访问 data:', this.message) // 输出: 'Hello Vue!'
    console.log('created 中访问 method:', typeof this.sayHello) // 输出: 'function'
    this.sayHello()
  },
  methods: {
    sayHello() {
      console.log(this.message)
    }
  }
}

⚠️ 常见的误区与最佳实践

• 不要在 beforeCreate 中尝试操作 data 或调用 methods。如果需要设置一些与响应式数据无关的实例属性，可以直接在 this 上添加（例如 this.myNonReactiveProp = 'value'），但这通常不是好的实践。
• 进行异步数据请求：虽然很多人习惯在 created 中发起初始的 AJAX 请求，但如果你不需要操作 DOM，在 created 中进行是合适的，因为它比 mounted 触发更早。
• 操作 DOM：如果你需要操作 DOM，必须在 mounted 或之后的钩子中进行，因为直到 mounted 被调用时，Vue 才完成了将模板编译、渲染成真实的 DOM 并挂载到页面上。

总结

记住这个固定顺序：beforeCreate（数据无）→ data 初始化（数据有）→ created（数据可操作）。这是理解 Vue 实例创建过程的基础。