Vue.js 如何在setup脚本中使用created钩子函数

在本文中，我们将介绍如何在Vue.js的setup脚本中使用created钩子函数。created钩子函数在组件实例被创建之后立即执行，并且只会执行一次。它是一个非常有用的钩子函数，可以用来执行一些初始化的工作。

1. 在setup脚本中使用created钩子函数

在Vue.js 3中，我们可以通过在<script>标签中的setup()函数中使用onMounted方法，来替代传统的钩子函数。下面是一个使用created钩子函数的示例：

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

<script>
import { onMounted, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello Vue.js',
    });

    onMounted(() => {
      console.log('created hook in setup script');
    });

    return {
      ...state,
    };
  },
};
</script>

在上面的例子中，我们在setup()函数中定义一个state对象，包含一个message属性，并通过reactive()函数将其转化为响应式数据。在onMounted()方法中，我们将创建钩子函数的逻辑代码放置其中。

2. created钩子函数的使用场景

创建钩子函数适用于以下场景之一：

数据初始化：在created钩子函数中，我们可以执行数据的初始化操作，例如从服务器获取数据、设置默认值等。这样做可以确保在组件实例创建时，相关的数据已经得到了正确的初始化。
发起异步请求：如果我们需要在组件实例创建后立即发起一个异步请求，那么可以将请求逻辑放置在created钩子函数中。这样可以确保请求在组件加载完毕后立即执行，并且处理响应的逻辑也可以在这个钩子函数中进行。

3. 示例：在created钩子函数中初始化数据

下面是一个示例，展示了如何在created钩子函数中进行数据的初始化。

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

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  created() {
    // 从服务器获取数据
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.message = data.message;
      });
  },
};
</script>

在上述示例中，我们在created钩子函数中使用fetch函数从服务器获取数据。然后，将返回的数据赋值给组件的message属性。这样，在组件实例创建后，message属性就会被正确地初始化为对应的值。

4. 示例：在created钩子函数中发起异步请求

下面是一个示例，展示了如何在created钩子函数中发起异步请求。

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

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 发起异步请求
      axios.get('https://api.example.com/data')
        .then(response => {
          this.message = response.data.message;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>

在上述示例中，我们在created钩子函数中调用fetchData方法，该方法会发起一个异步请求。请求返回后，将返回的数据赋值给组件的message属性。这样，页面加载完毕后，message属性就会被正确地设置为对应的值。