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');
1
2
3
4
5
6
7
8

2.inject接收

  应用范围内任意组件要使用provide提供的的值时，都可以通过 inject 进行接收

<template>
	
    <p>{{ name }}p>
template>

<script setup>
import { inject, onMounted } from 'vue';

// 组件中使用 inject 通过 key 接收全局属性
let name = inject("name");

onMounted(() => {
  console.log(name);	// provideName
})
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二、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');
1
2
3
4
5
6
7
8

  组件中：无需接收直接渲染全局属性至模板中

<template>
	
    <p>{{ myName }}p>
template>
1
2
3
4

注：若命名冲突时，组件的 property 具有优先权。

<template>
	
    <p>{{ myName }}p>
template>

<script setup>
import { ref } from 'vue';
let myName = ref('Nancy');		// 命名冲突时，组件的 property 具有优先权。
script>
1
2
3
4
5
6
7
8
9

三、区别

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>
1
2
3
4
5
6
7
8
9
10
11

注：虽然我们成功通过该方式访问了通过 globalProperties 挂载的全局属性，但在Vue3官网中，强烈建议不要把它当作在组合式 API 中获取 this 的替代方案来使用，这里只做了解。

2.使用场景

  上文中，使用 provide 和使用 globalProperties 都可以达到相同的效果。但二者的使用场景却有所不同。
  在实际开发中：
  app.provide 一般用在插件中定义全局的变量，如在Vue3组合式API官方文档中描述：在插件中，我们可以将插件接收到的 options 参数提供给整个应用。那么我们在组件中就可以通过 inject 接收插件的对象 插件中的 Provide / Inject
  app.config.globalProperties一般用在当前应用的全局配置中，可能在应用的很多组件中会使用到。当然插件中也可以使用，基于 install 函数中暴露 app 实例的特性。（若对插件有点懵可以参考：Vue应用API——use解析）

---