Vue3如何将响应式组件挂载到globalProperties替代Vue2 prototype写法

数据老陈

2026-10-4

问题原因

你在Vue3中的写法错误核心是混淆了应用实例和组件实例的区别：
Vue2中new Vue()返回的是可响应的根组件实例，而Vue3中Vue.createApp()返回的是应用上下文实例，本身不携带你定义的data、methods等配置，自然无法访问对应属性和方法。

Vue3正确实现方式

Vue3完全支持全局属性挂载，不需要对现有插件做全量重构，有两种常用实现方案：

方案1：直接用`reactive`创建响应式全局对象（更推荐）

不需要创建额外的应用/组件实例，直接用Vue3提供的响应式API生成共享对象即可：

const app = Vue.createApp({});

app.use({
  install(app) {
    app.config.globalProperties.$counter = Vue.reactive({
      value: 1,
      increment() {
        this.value++
      }
    })
  }
})

app.mount('#app');

该方案更轻量，也天然支持TypeScript类型推导。

方案2：沿用组件实例写法（兼容旧逻辑）

如果要对齐Vue2的实现逻辑，需要将创建的counter应用挂载到脱离文档的空节点，拿到根组件实例后再挂载到全局：

const app = Vue.createApp({});

app.use({
  install(app) {
    const counterApp = Vue.createApp({
      data: () => ({ value: 1 }),
      methods: {
        increment() { this.value++ }
      }
    })
    // 挂载后拿到组件实例再挂载到全局
    app.config.globalProperties.$counter = counterApp.mount(document.createElement('div'))
  }
})

app.mount('#app');