vue3访问全局属性 proxy 和 instance.appContext.config.globalProperties 的差异

main.js 中 设置了 app.config.globalProperties.$aaa = AAA 后

在组件中 可以通过  proxy 或  instance.appContext.config.globalProperties 来访问，

<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
myAAA = proxy.$aaa
</script>

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

const instance = getCurrentInstance();
const globalProperties = instance.appContext.config.globalProperties;

myAAA = globalProperties.$aaa
</script>

大多数情况下，proxy 和 instance.appContext.config.globalProperties 是可以互换的。proxy 方式更简洁。

• proxy 只能在 setup 函数内部使用。如果你需要在 setup 函数之外访问全局属性，就必须使用 instance.appContext.config.globalProperties。   [例如自定义钩子中访问全局属性]

自定义钩子中访问全局属性

//hooks.js

import { getCurrentInstance } from 'vue';

export function useGlobal() {
  const instance = getCurrentInstance();
  const globalProperties = instance.appContext.config.globalProperties;
  return globalProperties;
}

<!-- HelloWorld.vue -->

<script setup>

import useGlobal from '../hooks/hooks'
const { globalProperties } = useGlobal()


//.....


</script>


<template> </template>

<style scoped>  </style>