vue3中是否有created

在Vue.js的发展历程中，Vue 2的created钩子函数广为人知，它在实例初始化之后，数据观测和property、method计算之后被调用，开发者常在此处进行数据的获取和一些初始逻辑的处理。那么在Vue 3中，是否还有created呢？

实际上，Vue 3依然保留了created钩子函数，不过在Composition API中，它的使用方式发生了一些变化。

在传统的Vue 2选项式API里，我们这样使用created：

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟获取数据
      this.message = '从服务器获取的数据';
    }
  }
}
</script>

而在Vue 3的Composition API中，我们使用setup函数来替代部分传统钩子函数的功能。虽然created仍然存在，但在setup函数内有更简洁的方式来实现类似逻辑。setup函数在组件创建之前执行，并且在created钩子函数之前调用。

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

<script setup>
import { ref } from 'vue';

const message = ref('');

const fetchData = () => {
  message.value = '从服务器获取的数据';
}

fetchData();
</script>

在这个例子中，我们在setup函数内直接定义数据和方法，并调用获取数据的方法，这在功能上类似于Vue 2中created钩子函数的作用。

虽然Vue 3保留了created，但随着Composition API的推广，开发者更多地会在setup函数中编写逻辑。setup函数提供了更灵活和强大的方式来组织代码，使得代码结构更加清晰，尤其在处理复杂组件逻辑时优势明显。

Vue 3中有created，但在开发中，尤其是使用Composition API时，开发者有了更多的选择和更优化的方式来处理组件初始化逻辑。理解这些变化，能让开发者更好地利用Vue 3的新特性，提升开发效率和代码质量。