仅使嵌套属性具有反应性答案

【问题标题】：Make only nested property reactive仅使嵌套属性具有反应性
【发布时间】：2019-04-10 18:19:27
【问题描述】：

我有一个数据对象，它由与 vue/UI 无关的属性和描述状态的数据组成。现在我只希望state 具有反应性，但我最初需要组件中的整个对象。我需要 vue 不修改其他属性，因为它与访问其他属性的另一个库混淆。（期望数组但得到观察者）

是否可以只使对象的一部分具有反应性？

class Game {
    constructor() {
        this.untrackedProperty = ...;
        this.state = {
            these: "",
            should: "",
            be: "",
            reactive: ""   
        }
    }
}


// vue component
<script>
export default {
    data: function() {
        return {
            gameState: null
        }
    },
    created() {
        this.game = new Game();
        this.gameState = this.game.state;
    }
}
</script>

~~类似的东西。~~ 我的意思是“这就是我认为它应该起作用的方式 - 它没有，但我认为它很好地描述了我的意图”

【问题讨论】：

你能提供更多你想要的信息吗？不是“东西”……请提供对象以及您想要更改的部分以及不更改的部分
可能我表达的不是很清楚，但是数据结构和我上面描述的一模一样。游戏对象发生了变化，状态发生了变化，untrackedProperty 也发生了变化，但我不希望 Vue 观察到 untrackedProperty 而是只观察 state 属性。我的理解是，我在data 中输入的所有内容都被 Vue 跟踪，因此我只将state 放入数据中，但这似乎不起作用，因为它没有正确更新。如果我将整个 game 对象放在上面，它确实会更新，但它会与我不希望它弄乱的属性混淆。

标签： vue.js vuejs2 vue-component

【解决方案1】：

如何将 2 值传递给您的组件：

状态这将被跟踪
untrackedProperty 这将不会被跟踪

不要将 Game 作为一个整体对象传递，而是将这 2 个值分开

【讨论】：

感谢您的浏览。游戏对象在 Vue 组件中创建，然后向下传递。因此问题是如何在父组件中设置对象。我认为这个问题足够基本，但我将创建一个沙箱来说明问题/我需要什么。