我可以通过引用编辑 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

我想在课堂上使用它没有什么坏处。

Answer 2

从像这里这样的组件操作对象时：

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

这种方式实际上可能比在组件中执行this.person.age += 1 更好。

原因是，虽然person.age 加 1 年确实很简单，但其他对象可能有更复杂的条件。也许你修改了你的代码，所以celebrateBirthday 有一些限制，或者对这个人的状态做更多的修改，除了年龄。

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

可能的警告

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