Vue.js组件不更新问题：导入的布尔变量变更无响应

你导入的NetworkManager里的connected不是Vue的响应式变量，即便把整个对象放到组件的data中，Vue仅会对对象本身做响应式代理，无法追踪对象内部普通属性的变更，所以变量更新时组件不会重新渲染。

方案1：修改NetworkManager，将变量改为响应式（推荐） #

直接在@/lib/network-manager中把connected定义为Vue的ref变量，这样所有导入它的组件都能自动响应其变化：

// @/lib/network-manager.js
import { ref } from 'vue';

// 定义响应式变量
export const connected = ref(false);

// 提供更新变量的方法（外部通过此方法修改状态）
export function updateConnectedStatus(status) {
  connected.value = status;
}

组件中直接导入使用：

<script>
import { connected } from "@/lib/network-manager";
import MainMenu from "@/components/main-menu/main-menu.vue";
import GameView from "@/components/game/game-view.vue";

export default {
    name: "App",
    components: {
        MainMenu,
        GameView,
    },
};
</script>

<template>
    <p>{{ connected }}</p>
    <game-view v-if="connected" />
    <main-menu v-else />
</template>

注：ref变量在模板中会自动解包，无需写connected.value。

方案2：在组件内将NetworkManager转为响应式对象（无法修改原文件时使用） #

如果不能改动NetworkManager的代码，可在组件内用reactive包裹它，同时要确保后续更新的是代理后的对象：

<script>
import { reactive } from 'vue';
import * as NetworkManager from "@/lib/network-manager";
import MainMenu from "@/components/main-menu/main-menu.vue";
import GameView from "@/components/game/game-view.vue";

export default {
    name: "App",
    components: {
        MainMenu,
        GameView,
    },
    data() {
        // 转为响应式对象
        return {
            netManager: reactive(NetworkManager)
        };
    },
    // 若外部仍直接修改原NetworkManager的属性，需手动同步
    mounted() {
        this.syncTimer = setInterval(() => {
            if (this.netManager.connected !== NetworkManager.connected) {
                this.netManager.connected = NetworkManager.connected;
            }
        }, 100);
    },
    beforeUnmount() {
        clearInterval(this.syncTimer);
    }
};
</script>

<template>
    <p>{{ netManager.connected }}</p>
    <game-view v-if="netManager.connected" />
    <main-menu v-else />
</template>

为什么之前的尝试无效？ #

• 直接把NetworkManager放进data：Vue仅代理对象本身，无法追踪内部普通属性的变更。
• 用ref包裹整个NetworkManager：ref对对象类型仅监听引用变化，内部属性修改不会触发更新。
• 直接监听NetworkManager.connected：因为它不是响应式变量，Vue的watch无法自动追踪其变化，除非手动轮询（如方案2的定时器）。

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