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

最新推荐文章于 2025-04-04 17:57:18 发布

仰望星空的代码

最新推荐文章于 2025-04-04 17:57:18 发布

阅读量1.2w

点赞数 2

分类专栏： Vue.js踩坑记文章标签： vue.js vue3 setup globalPropertie

交流qun：1061950566

本文链接：https://blog.youkuaiyun.com/wangzl1163/article/details/120317430

版权

Vue.js踩坑记专栏收录该内容

21 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了在vue3的setup函数中如何优雅地使用globalProperties，由于setup中不能直接使用this，官方推荐的getCurrentInstance方法不被鼓励。文章提出结合provide/inject来解决这个问题，详细介绍了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

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()
            ...... // 此处省略其他代码