Question

让我以一个例子来说明我的问题。

示例：我有一个与之相似的人类

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    celebrateBirthday() {
        console.log("Happy Birthday");
        this.age += 1;
    }
}

我像这样在vue中使用此类

data() {
    return {
        person: new Person("Kireeti", 26)
    }
},
mounted() {
    this.person.celebrateBirthday();
}

通常，我们会这样做

mounted() {
    this.person.age += 1 
}

但是出于明显的原因，我想在全班学习。这对我有用，因为对象具有引用。但是我想知道我能做到吗？

有人有什么主意吗？

Answer 1

从类似此处的组件中操作对象时：

data() {
    return {
        person: new Person("Kireeti", 26)
    }
},
mounted() {
    this.person.celebrateBirthday();
}

实际上，这种方式比仅在组件中进行this.person.age += 1要强。

原因是，虽然将person.age加1年确实很简单，但其他对象可能具有更复杂的条件。也许您修改了代码，以使celebrateBirthday受到某些限制，或者在年龄之外对人的状态进行了更多修改。

您绝对不想在Vue组件中处理该逻辑，因为其他组件也可能使用Person对象。将这种逻辑保留在课堂上似乎是更好的方法。

可能的警告

使用对象引用可能出错的地方都与反应性有关。如果Person有一个friends数组，并且您的组件依赖于它的更改，例如：

<friend-component v-for="friend in friends" :data="friend" />

您需要小心，并以Vue can track的方式修改内部人friends的数组。您不能依靠on Sets or Maps。有some other limitations too。另外，在观看对象变化时，您还需要小心设置{deep: true}。

但是，对于属于您的Vue组件或对象的变量，所有这些都是相同的：据我所知，基本上没有依赖对象引用的问题。

Answer 2

我想以类方式使用它没有危害。

我可以通过引用编辑Vue数据吗？

2 个答案:

可能的警告