beforeCreate与created

这两个钩子处于组件创建的最早阶段。

beforeCreate

export default {
  beforeCreate() {
    // data 和 methods 尚未初始化
    console.log(this.$el) // undefined
  }
}

此时组件的 data、methods、computed 都未初始化。

created

export default {
  created() {
    // data 和 methods 已初始化
    console.log(this.message) // 可以访问
    console.log(this.$el) // 仍为 undefined
  }
}

Composition API

export default {
  setup() {
    // setup 执行时机类似 beforeCreate 和 created 之间
    
    onMounted(() => {
      // 替代 created 的常见用法
      fetchData()
    })
  }
}

Composition API 中无直接对应的钩子，通常在 setup 或 onMounted 中执行初始化逻辑。

典型用途

要点总结

• beforeCreate 时 data 未初始化
• created 时可访问 data 和 methods
• 两个钩子都无 DOM 访问（$el 为 undefined）
• Composition API 通常在 setup 或 onMounted 中处理初始化