vue3中如何优雅地在 setup 使用 globalProperties

Posted 2021-10-06 仰望星空的代码

一、前言

vue3 已经发布到 v3.2.x 版了，在项目中也使用上了 vue3，总体感觉还是不错的。vue3 中使用Proxy 来实现响应式数据，解决了 vue2 中的部分性能损耗、无法监听动态添加的属性的值变化、无法监听数组元素对象的属性的值的变化问题。vue3 中的模板可以包含多个根节点、v-model 参数化等等特性也很值得肯定。还没有使用 vue3 的开发者，推荐赶快上手试用。

二、令人困惑的 globalProperties

vue3 中每个 vue 的实例都会对外暴露一个包含此应用实例的配置设置的 config 对象。在挂载应用之前，你可以修改其 property。其中的 globalProperties 是一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。这个属性被用来代替vue2中对Vue.prototype的扩展。

在官方文档中只是说明了使用该属性替代vue2中的Vue.prototype扩展的方式，并没有说明在组合式 API 中如何使用，在选项式 API 中直接用this调用即可。

app.config.globalPropterties.$http = () => {}

// options API 方式
export default {
    methods: {
        getList() {
            this.$http()
            ...... // 此处省略其他代码
        }
    }
}

在组合式 API 中的 setup 函数中是无法使用 this 的，this 的值为 undefined；这样就不能使用 this 直接调用 globalProperties 的属性。

 三、优雅地使用 globalProperties

官方文档中提到了一种