如何在 Vue 3 的 Composition API 中调用自定义的全局函数？

在Vue 3中，使用Composition API调用全局函数涉及几个步骤，主要包括在Vue应用创建时注册这些函数，然后在需要使用的组件中通过合适的方法调用它们。下面是具体如何操作的详细步骤：

步骤 1: 定义全局函数

首先，我们需要定义一些全局函数。通常，我们会在一个单独的文件中定义这些函数。例如，我们可以创建一个utils.js文件，其中包含一些实用函数：

javascript
// utils.js
export function formatDate(date) {
  return date.toISOString().slice(0, 10);
}

export function capitalize(text) {
  return text.charAt(0).toUpperCase() + text.slice(1);
}

步骤 2: 在Vue应用中注册全局函数

接下来，我们需要在创建Vue应用的时候，通过全局属性（例如app.config.globalProperties）注册这些函数，使其在任何组件中都可访问。

javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { formatDate, capitalize } from './utils';

const app = createApp(App);

// 将函数注册为全局函数
app.config.globalProperties.$formatDate = formatDate;
app.config.globalProperties.$capitalize = capitalize;

app.mount('#app');

步骤 3: 在组件中使用全局函数

在组件中，我们可以通过Composition API的getCurrentInstance方法获取组件实例，然后访问这些全局函数。

vue
<template>
  <div>
    <p>Formatted Date: {{ formattedDate }}</p>
    <p>Capitalized Text: {{ capitalizedText }}</p>
  </div>
</template>

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

export default {
  setup() {
    const { proxy } = getCurrentInstance();
    const formattedDate = ref('');
    const capitalizedText = ref('');
    
    onMounted(() => {
      const today = new Date();
      formattedDate.value = proxy.$formatDate(today);
      capitalizedText.value = proxy.$capitalize('hello');
    });

    return { formattedDate, capitalizedText };
  }
}
</script>

在这个组件中，我们通过getCurrentInstance().proxy访问注册的全局函数，并在组件的onMounted生命周期钩子中使用这些函数。使用ref来保持响应性，并将函数的结果展示在组件的模板中。

总结

通过上述步骤，我们可以在Vue 3中的Composition API环境下成功注册并调用全局函数。这样的方法使得代码更加模块化，同时保持了函数的可复用性和访问性。在实际开发中，这样的模式非常适合处理一些常用的功能，如格式化数据、计算属性等。