根本原因是变量未进入Vue响应式系统。Vue仅对data、computed、props、setup返回对象中的属性建立响应式连接，挂载到prototype、window或普通模块导出的对象无法被Proxy或Object.defineProperty代理，修改不会触发更新。
Vue 中“全局变量改了但视图不更新”，本质不是因为变量“全局”，而是它**根本没进入 Vue 的响应式系统**。Vue 的响应式只作用于 data、computed、props（部分场景）、setup 返回的对象（Vue3） 中声明的属性，直接挂在 Vue.prototype、window、globalThis 或独立模块导出的普通对象上，修改后自然不会触发更新。
一、为什么挂到原型或全局对象上的变量不响应？
Vue2 使用 Object.defineProperty，Vue3 使用 Proxy，二者都只对初始化时明确交由 Vue 管理的数据结构建立响应式连接。例如：
-
Vue.prototype.$myGlobal = { count: 0 }→this.$myGlobal.count++不触发更新（未被代理） -
window.config = { theme: 'dark' }→ 修改window.config.theme完全脱离 Vue 响应链 - 独立模块导出：
export const store = { user: null }→ 直接赋值store.user = {...}不可侦测
二、真正有效的“全局状态”该怎么做？
要让跨组件共享的状态具备响应式，必须让它被 Vue 实例或组合式 API 正确包裹和消费：
-
Vue2 推荐：使用 Vuex（v3）或简单的 event bus + data 绑定
把状态收口到data()中，通过vm.$emit/$on或Vue.set触发变更 -
Vue3 推荐：使用 provide/inject + reactive / ref
在根组件provide一个reactive({ count: 0 })，子组件inject后解构使用，修改即响应 -
通用方案：用 Pinia（Vue2.7+ / Vue3）
Pinia store 是响应式的，且支持 TypeScript、热更新、插件生态，store.count++自动更新所有使用它的组件
三、临时绕过限制的应急手段（慎用）
若因历史原因无法重构，需快速修复视图不更新问题，可选以下方式，但会牺牲响应式语义和可维护性：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
-
this.$forceUpdate()：强制重渲染当前组件（不推荐用于频繁操作） -
this.$nextTick(() => { /* DOM 已更新 */ })：配合手动赋值，确保视图同步，但需自行管理依赖 -
用
v-if控制显隐：先设为false，再$nextTick后设回true，实现“销毁-重建”式刷新
四、检查是否误用了非响应式写法
即使变量在 data 中，也可能因写法错误导致失效：
- 对象新增属性未用
this.$set（Vue2）或reactive外层包裹（Vue3） - 数组用
arr[i] = x而非arr.splice(i, 1, x)或Vue.set(arr, i, x) - 将响应式对象整个替换为普通对象（如
this.obj = JSON.parse(JSON.stringify(old))），丢失响应性
归根结底，“全局变量不更新”不是 bug，是机制使然。真正可靠的方案，永远是让状态进入 Vue 的响应式轨道——要么用官方状态管理，要么确保每次读写都发生在被代理的对象路径上。
