vue3基础 globalProperties，getCurrentInstance上下文（替代this）

globalProperties

类型：[key: string]: any
默认：undefined

添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。

globalProperties上添加append，可全局使用

vue3.0 setup 中使用 globalProperties
// 2.0
Vue.prototype.$http = () => {}

// 3.0
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

最常用的场景，在页面渲染前，通过http请求获取需要显示的数据。

在2.0，通过在vue原型上添加$http 属性，可以在组件实例中通过this.$http使用；

//2.0
 created(){
      this.$http.get('/getData').then().catch(err => {console.log(err)})
}

而在3.0的settup中是没有this的。

import { getCurrentInstance,onBeforeMount} from 'vue';
setup (props,context) {
　　　　const {appContext: {config: {globalProperties: global}}} = getCurrentInstance();//3.0.11
　　　  onBeforeMount(()=>{
　　　　　　global.$http.get('/getData').then().catch(err => {console.log(err)}) });
　　　　　　....... 
}

getCurrentInstance

vue3的setup中没有this时需要使用getCurrentInstance()来获取。

vue3中，getCurrentInstance()可以用来获取当前组件实例

例子：
添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。

这可以代替 Vue 2.x Vue.prototype 扩展：

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
 
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

当我们想在组件内调用http时需要使用getCurrentInstance()来获取。

import { getCurrentInstance, onMounted } from "vue";
export default {
  setup( ) {
    const { ctx } = getCurrentInstance(); //获取上下文实例，ctx=vue2的this
    onMounted(() => {
      console.log(ctx, "ctx");
      ctx.http();
    });
  },
};

getCurrentInstance代表上下文，即当前实例。ctx相当于Vue2的this, 但是需要特别注意的是ctx代替this只适用于开发阶段，如果将项目打包放到生产服务器上运行，就会出错，ctx无法获取路由和全局挂载对象的。此问题的解决方案就是使用proxy替代ctx，代码参考如下。

import { getCurrentInstance } from 'vue'
export default ({
  name: '',
  setup(){
    const { proxy } = getCurrentInstance() // 使用proxy代替ctx，因为ctx只在开发环境有效
	onMounted(() => {
      console.log(proxy, "proxy");
      proxy.http();
    });
  }
})

原文： https://blog.csdn.net/weixin_50077637/article/details/118693210