面试题：Vue 2与Vue 3生命周期钩子的变化之中，created钩子在Vue 3中有何不同表现

执行时机

相同点：在Vue 2和Vue 3中，created生命周期钩子函数都是在实例创建完成后被立即调用。此时，组件的数据观测（data observer）和事件机制已经被初始化，但DOM还未被挂载。
不同点：Vue 3在内部实现上进行了优化和更新，整体的初始化过程在一些底层细节上与Vue 2有所不同，但created钩子在概念上的执行时机保持一致。

作用范围

相同点：在Vue 2和Vue 3中，created钩子函数的作用范围都是在组件实例内部。在这个钩子函数中，可以访问组件的data、methods、computed等属性和方法，用于进行一些组件内部的初始化操作。
不同点：Vue 3引入了Composition API，使得逻辑复用和代码组织方式有所变化。在使用Composition API时，created钩子在setup函数中通过onCreated来使用，这改变了代码的书写结构，但功能上与Vue 2中在组件选项式API下的created钩子作用类似，都是针对当前组件实例。

使用方式

相同点：在选项式API中，使用方式基本一致。在Vue 2和Vue 3的组件定义中，都可以直接在组件选项对象中定义created函数。
不同点：Vue 3新增Composition API，在Composition API中，使用onCreated函数来替代created钩子，并且要在setup函数中使用。

Vue 3中使用created钩子进行数据初始化操作的代码示例

选项式API

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.message = '数据初始化内容'
  }
}
</script>

Composition API

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref, onCreated } from 'vue'

const message = ref('')

onCreated(() => {
  message.value = '数据初始化内容'
})
</script>

星途面试题库

面试题：Vue 2与Vue 3生命周期钩子的变化之中，created钩子在Vue 3中有何不同表现

知识考点

面试题答案

执行时机

作用范围

使用方式

Vue 3中使用created钩子进行数据初始化操作的代码示例

选项式API

Composition API