javascript - 我可以通过引用编辑vue数据吗？

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 对象。将这种逻辑保留在类中似乎是更好的方法。

可能的注意事项

使用对象引用可能出错的事情都与 react 性有关。如果 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 组件或对象的变量来说，所有这些都是相同的:据我所知，基本上依赖对象引用没有问题。