Vue 3 不会检测到对 Vue 组件外部创建的对象所做的更改

我有一个班级角色：Character.ts

    /// This is called when server responds
    public setAttributeByType(type: StatsTypes, value: number): void {
        switch (type) {
            case StatsTypes.STRENGTH:
            case StatsTypes.DEXTERITY:
            case StatsTypes.VITALITY:
            case StatsTypes.INTELIGENCE:
                this.stats[type] = value;
                break;
            default: break;
        }
    }
    ....

该类实例是在我的“网络代码”中的 Vue 组件外部创建的：

    public static onStartGame(data:any):void {
        Player.character = new Character(data.data);
        Game.displayGamePage(PagesIndex.GAME_PAGE);
        requestAnimationFrame(Game.loop);
    }

并在主要组件中使用：Game.vue

import { defineComponent } from 'vue'
import Player from '@/Player/player';
import SceneManager, { Scenes } from '@/Render/scene_manager';
import Scene from '@/Render/scene';
import MainScene from "@/Render/scenes/main";
import MapScene from "@/Render/scenes/map";
import Game from '@/game/game';

// Components
import VplayerBar from "@/vue/subs/playerBar.vue"
import Vcharacter from "@/vue/subs/character.vue"

export enum GamePages {
    MAIN_PAGE = 1,
    MAP_PAGE,
}

export default defineComponent({
    name: "game",
    components: {
        VplayerBar,
        Vcharacter,
    },
    data() {
        return {
            page: GamePages.MAIN_PAGE,
            scenes: Scenes,
            gamePages: GamePages,
            player: Player,
            character: Player.character, /* <------------ Reference to class */
            pages: {
                character: false,
            }
        }
    },
})

...将其作为支柱传递给character.vue成分

export default defineComponent({
    name: "character",
    props: {
        character: {  // <---- This prop does not change
            type: Character,
            required: true
        },
        toggleCharacter: {
            type: Function, 
            required: true
        }
    },
    components: {
        VBackpack,
        VInventory
    },
    data() {
        return {
            StatsTypes,
        }
    },
    methods: {
        toglePage() {
            this.toggleCharacter()
        },
        getPortrait(isMobile:boolean = false) {
            return Character.getCharacterPortrait(this.character.faction, this.character.gender, isMobile);
        },
        addPoint(attribute:StatsTypes, value: number) {
            if (GKeyHandler.keys[Keys.SHIFT_LEFT])
                value = 10;

            CharacterHandler.addAttributePoint(Player.character, attribute, value);
            //this.character.stats[StatsTypes.STRENGTH] += 1; 
        }
    }
});

问题是，每当我更改 vue 组件之外的字符类实例中的任何内容（在我的网络代码中）时 - 例如character.setAttributeByType(attribute, value)，Vue 没有看到变化。如果我直接在里面这样做character.vue组件，它可以工作（请参阅中的注释代码addPoint)

我尝试使用 Proxy & Watch，但没有帮助。

您的问题是描述的“身份”问题here https://v3.vuejs.org/guide/reactivity.html#proxy-vs-original-identity

Vue 3 使用 ES6 代理来使对象具有响应性。如果你这样做const data = reactive(payload), the data那么是不同的对象payload（与 Vue 2 不同，Vue 2 中的对象只是用响应式 setter/getter 进行修改）。

这同样适用于选项 API（您正在使用）。如果你这样做character: Player.character in data()结果是this.character（在 Vue 组件内部）是不同的对象Player.character。您可以通过执行以下操作轻松测试它console.log(this.character === Player.character)...例如在mounted()- 结果将是false

因此，如果您使用进行任何更改this.character（Vue 反应式代理），Vue 将检测更改并重新渲染（并将更改传播到原始对象），但如果更改原始对象Player.characterVue 未检测到更改...

简单的解决方法是使用 Vue 的合成API https://v3.vuejs.org/api/basic-reactivity.html#basic-reactivity-apis它允许您在 Vue 组件之外使用 Vue 反应性。

import { reactive } from `vue`

Player.character = reactive(new Character(data.data));

现在当你使用Player.character初始化data()在 Vue 组件中，Vue 认为它已经是一个响应式代理，并且不再将其包装在代理中