26.Vue3学习篇-定义全局变量

在 Vue 3 中，可以使用 provide 和 inject 来定义全局变量。以下是一个示例：

import { createApp } from 'vue'

const app = createApp({
    setup () {
        // 定义一个全局变量
        const globalVarible = 'this is global data'

        // 使用provide 提供全局变量
        provide('globalVarible', globalVarible)
    }
})

app.mount('#app')

在其他组件中，可以使用 inject 来获取全局变量：

import { inject } from 'vue'

export default {
    setup () {
        // 使用inject来获取全局变量
        const globalVariable = inject('globalVariable')
        
        // 使用全局变量
        console.log('globalVariable', globalVariable)
    }
}

请注意，这种方式定义的全局变量并不是真正的全局变量，而是在组件树中进行传递和共享的。

另外在 Vue 3 中，可以使用 app.config.globalProperties 来定义全局变量和方法。案例如下：

import { createApp } from 'vue'

const app = createApp({})

// 定义全局变量和方法

app.config.globalProperties.$globalVariable = '这是一个全局变量'
app.config.globalProperties.globalMethod = function () {
    console.log('这是一个全局方法')
}

app.mount('#app')

在组件中可以通过 this.$globalVariable 和 this.globalMethod() 来访问全局变量和方法：

<template>
  <div>
    <p>{{ $globalVariable }}</p>
    <button @click="globalMethod">调用全局方法</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

在 Vue 3 中，provide/inject 和 app.config.globalProperties都可以实现一定程度上的全局数据共享，但它们有以下一些区别：

一、provide/inject

1.数据传递方式

• provide函数用于在祖先组件中提供数据，inject函数用于在后代组件中注入这些数据。数据是通过组件树的层级关系进行传递的。
• 这种方式可以灵活地控制哪些组件可以访问特定的数据，并且可以选择性地在特定的组件层级中提供数据。

2.数据响应性：

• 如果提供的数据是响应式的（例如通过 ref 或 reactive 创建的），那么注入到后代组件中的数据也是响应式的，当提供的数据发生变化时，注入数据的组件也会自动更新。

3.解耦姓

• 提供和注入数据的组件之间相对解耦，不直接依赖于全局状态，而是通过明确的依赖注入机制进行数据传递，使得组件的复用性更高。

二、app.config.globalProperties

1.全局访问

• 通过 app.config.globalProperties 添加的属性和方法可以在任何组件的实例中通过 this 关键字直接访问，类似于 Vue 2 中的全局混入。
• 这种方式使得数据在整个应用中都可以全局访问，无需在每个组件中单独注入。

2.缺乏层级控制：

• 无法像 provide/inject 那样精细地控制数据在组件树中的传递范围，所有组件都可以访问这些全局属性和方法。

3.响应性问题：

        添加到 app.config.globalProperties 的普通属性不是响应式的，如果要使用响应式数据，需要使用 ref 或 reactive 创建响应式对象后再添加到全局属性中。

总体而言，如果需要在组件树中有选择地传递数据，并且希望保持组件之间的解耦性和更好的响应性管理，provide/inject是更好的选择。如果需要快速在整个应用中提供一些全局可用的工具方法或简单的数据，并且不太关心响应性和组件的解耦性，app.config.globalProperties可能更方便。