Vue3初始化时如何调用函数

在Vue 3开发中，经常会遇到需要在组件初始化阶段调用特定函数的场景。这对于执行数据获取、初始配置等操作非常关键。以下将详细介绍几种常见的在Vue 3初始化时调用函数的方法。

使用 setup 函数

setup 是Vue 3组件中的一个新选项，它在组件创建之前执行。可以直接在 setup 函数内部调用所需的函数。例如：

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

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

const message = ref('');

const fetchData = () => {
  // 模拟数据获取
  message.value = '初始化数据';
};

fetchData();
</script>

在上述代码中，fetchData 函数在 setup 函数内部被立即调用，从而实现了在组件初始化时执行数据获取操作。

使用 onMounted 生命周期钩子

onMounted 钩子函数会在组件挂载完成后调用。如果希望在组件挂载到DOM后执行某个函数，这是一个很好的选择。示例如下：

<template>
  <div>{{ data }}</div>
</template>

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

const data = ref('');

const loadData = () => {
  data.value = '挂载后的数据';
};

onMounted(() => {
  loadData();
});
</script>

这里，loadData 函数在 onMounted 钩子中被调用，确保在组件成功挂载到页面后执行数据加载逻辑。

在 created 生命周期钩子中调用（如果使用选项式API）

虽然Vue 3更推荐使用 setup 函数，但在使用选项式API时，created 钩子函数在实例初始化之后，数据观测和 event/watcher 事件配置之前被调用。可以在这个钩子中调用函数。

<template>
  <div>{{ info }}</div>
</template>

<script>
export default {
  data() {
    return {
      info: ''
    };
  },
  created() {
    this.fetchInfo();
  },
  methods: {
    fetchInfo() {
      this.info = '创建时获取的信息';
    }
  }
};
</script>

在实际开发中，需要根据具体的业务需求选择合适的方式在Vue 3初始化时调用函数。setup 函数适合在组件创建前执行逻辑，onMounted 用于组件挂载后操作，而 created 则在选项式API中有其特定的使用场景。通过合理运用这些方法，可以更高效地完成组件的初始化工作，提升应用的性能和用户体验。