Vue 3全局属性无响应：如何声明可全局修改的响应式全局变量？

你的问题核心是：直接挂载到app.config.globalProperties的普通JS对象不是响应式的，所以修改属性时无法触发组件模板的更新。下面是几种可行的解决方法：

方法一：用reactive包装全局对象（适合复杂对象） #

修改你的main.js，将全局对象用reactive包裹，使其成为响应式对象：

import { createApp, reactive } from 'vue';
const app = createApp(App);

// 用reactive包装成响应式对象
app.config.globalProperties.$myGlobalVariable = reactive({
   content: 'not updated'
});

// 模拟异步更新
setTimeout(() => {
  app.config.globalProperties.$myGlobalVariable.content = 'updated';
  console.log(app.config.globalProperties.$myGlobalVariable.content); // updated
}, 2000);

app.mount('#app');

组件代码无需修改，模板中的{{ $myGlobalVariable.content }}会自动同步更新，因为现在对象已被Vue的响应式系统追踪。

方法二：用ref包装单个值（适合简单值类型） #

如果你的全局变量是单个值（比如字符串、数字），用ref更合适：

import { createApp, ref } from 'vue';
const app = createApp(App);

// ref包装单个值，修改时需要访问.value
app.config.globalProperties.$myGlobalVariable = ref('not updated');

setTimeout(() => {
  app.config.globalProperties.$myGlobalVariable.value = 'updated';
  console.log(app.config.globalProperties.$myGlobalVariable.value); // updated
}, 2000);

app.mount('#app');

组件模板中可以直接写{{ $myGlobalVariable }}（Vue会自动为ref解包），也可以显式写{{ $myGlobalVariable.value }}。

方法三：使用Provide/Inject（Vue3推荐的组件共享方式） #

这种方式比直接挂载到全局属性更符合Vue的组件化设计思想，避免全局污染：

main.js 代码 #

import { createApp, reactive } from 'vue';
const app = createApp(App);

// 创建响应式全局状态
const globalState = reactive({
  content: 'not updated'
});

// 向所有子组件提供全局状态
app.provide('globalState', globalState);

setTimeout(() => {
  globalState.content = 'updated';
  console.log(globalState.content); // updated
}, 2000);

app.mount('#app');

组件代码 #

<script>
import { inject } from 'vue';
export default {
  setup() {
    // 注入全局状态
    const globalState = inject('globalState');
    
    setTimeout(() => {
      console.log(globalState.content) // updated
    }, 3000);
    
    return { globalState };
  }
}
</script>
<template>
  <main>
    <p>{{ globalState.content }}</p>
  </main>
</template>

为什么原代码不生效？ #

普通JS对象的属性修改不会被Vue的响应式系统监听，Vue无法感知到值的变化，因此不会触发模板的重新渲染。而reactive和ref是Vue专门用来创建响应式数据的API，它们会通过Proxy或Object.defineProperty（兼容模式）追踪数据变化，一旦数据更新就会自动同步到视图。

内容的提问来源于stack exchange，提问作者Bob