Vue3应用API——设置全局属性(app.provide与app.config.globalProperties的区别)
一、app.provide
1.全局注入
通过 provide 注入一个应用范围内所有组件都可以使用的值
import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App);
// 通过 app.provide(key, value) 全局注入一个属性 name
app.provide('name', 'provideName');
app.mount('#app');
2.inject接收
应用范围内任意组件要使用provide提供的的值时,都可以通过 inject 进行接收
<template>
<!-- provideName -->
<p>{{ name }}</p>
</template>
<script setup>
import { inject, onMounted } from 'vue';
// 组件中使用 inject 通过 key 接收全局属性
let name = inject("name");
onMounted(() => {
console.log(name); // provideName
})
</script>
二、app.config.globalProperties
1.用法
通过 app.config.globalProperties 来添加全局 property
import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App);
// 通过 app.config.globalProperties 设置全局属性 myName
app.config.globalProperties.myName = 'globalName';
app.mount('#app');
组件中:无需接收直接渲染全局属性至模板中
<template>
<!-- globalName -->
<p>{{ myName }}</p>
</template>
注:若命名冲突时,组件的 property 具有优先权。
<template>
<!-- Nancy -->
<p>{{ myName }}</p>
</template>
<script setup>
import { ref } from 'vue';
let myName = ref('Nancy'); // 命名冲突时,组件的 property 具有优先权。
</script>
三、区别
1.访问方式
在组合式API setup() 中,我们可以在组件中使用 inject 通过 key 接收app.provide全局注入的值。那如何在setup()里使用通过globalProperties挂载的全局属性呢?
如果是在 Vue2 中我们通过 Vue.prototype.xxx 的方式设置一个Vue构造函数的原型属性,我们尚可在选项式API中通过this的方式访问该属性。
如果想在 setup() 内部获取 this,需要用到:getCurrentInstance
<script setup>
import { onMounted, getCurrentInstance } from 'vue';
// Vue3官网中强烈建议不要把它当作在组合式 API 中获取 this 的替代方案来使用。
let internalInstance = getCurrentInstance();
let myName = internalInstance.appContext.config.globalProperties.myName;
onMounted(() => {
console.log(myName); // globalName
})
</script>
注:虽然我们成功通过该方式访问了通过 globalProperties 挂载的全局属性,但在Vue3官网中,强烈建议不要把它当作在组合式 API 中获取 this 的替代方案来使用,这里只做了解。
2.使用场景
上文中,使用 provide 和使用 globalProperties 都可以达到相同的效果。但二者的使用场景却有所不同。
在实际开发中:
app.provide 一般用在插件中定义全局的变量,如在Vue3组合式API官方文档中描述:在插件中,我们可以将插件接收到的 options 参数提供给整个应用。那么我们在组件中就可以通过 inject 接收插件的对象 插件中的 Provide / Inject
app.config.globalProperties一般用在当前应用的全局配置中,可能在应用的很多组件中会使用到。当然插件中也可以使用,基于 install 函数中暴露 app 实例的特性。(若对插件有点懵可以参考:Vue应用API——use解析)