Vue中app.config.globalPropertiesVue.prototype和getCurrentInstance的使用

 app.config.globalProperties和Vue.prototype

在Vue 3中，我们可以使用 app.config.globalProperties 来定义全局的属性和方法。这个属性和Vue 2中的 Vue.prototype 类似，但是在某些方面有所不同。

以下是Vue3中 app.config.globalProperties 和Vue2中的 Vue.prototype 的对比：

1、异步行为不同

Vue 3中是异步创建组件实例并挂载DOM，所以在 app.config.globalProperties 定义的方法中使用异步方法会更加安全。但是在Vue 2中使用 Vue.prototype 来定义方法则会有一些异步行为的问题。

2、组件实例不同

在Vue 3中，组件实例是通过 getCurrentInstance() 来获取的，所以在 app.config.globalProperties 中定义的方法能够访问组件实例。而在Vue 2中，Vue.prototype 定义的方法不能访问组件实例。

3、访问限制不同

在Vue 3中，我们可以通过 app.config.globalProperties 定义一些全局变量和方法，但是这些变量和方法不会被组件模板中的 v-bind 和 v-on 绑定到 this 上。而在Vue 2中，Vue.prototype 定义的变量和方法会被绑定到 this 上。

总体来说，Vue 3中的 app.config.globalProperties 和Vue 2中的 Vue.prototype 都是为了提供全局变量和方法的，但是在某些方面有所不同。Vue 3中的 app.config.globalProperties 更加安全和灵活，能够更好地满足开发者的需求。

案例 -getCurrentInstance注意⚠️

vue2
定义
Vue.prototype.$utils = utils;
Vue.prototype.$bus = new Vue();

使用
this.$utils
this.$bus

vue3
定义
app.config.globalProperties.$utils = utils;
app.config.globalProperties.$axios = getRequest;

使用
import {getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance();
proxy.$utils
proxy.$axios

app.config.globalProperties 可以在 Vue 3 中设置全局变量或函数，使其在整个应用程序中都可以访问。

以下是如何使用 app.config.globalProperties：

在 main.js 中导入并创建 Vue 应用程序：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 设置全局变量
app.config.globalProperties.$apiUrl = 'https://example.com/api'

// 设置全局函数
app.config.globalProperties.$formatDate = (date) => {
  // 日期格式化逻辑
}

// 挂载应用程序
app.mount('#app')

在组件中使用全局变量和函数：

<template>
  <div>
    <p>API URL: {{ $apiUrl }}</p>
    <p>Formatted date: {{ $formatDate(new Date()) }}</p>
  </div>
</template>

注意：如果使用 TypeScript，还需要在 shims-vue.d.ts 文件中声明全局变量和函数的类型，以便 IDE 可以正确识别它们。