[Vuejs]-Vue unexpected reactivity from props

by

1👍

✅

You instantiate your data with a direct link to the (initially undefined) property of your prop. This property is a complex entity like an Object (Arrays are Objects), and is thus called via reference. Since members references the same thing in memory as followList.data, when you’re calling members, it will follow the reference to the same entity as followList.data. This doesn’t have to do with Vue2 reactivity, but here’s a link nontheless.

  • push mutates the array it is called on; it will follow the reference through members and change followList.data, updating its value when called through followList as well. Because the data key is not present on instantiation of the component, Vue can’t watch it (just like you need to use Vue.set when adding a new key to a data object).
  • concat returns a new array of merged elements, and then replaces
    the reference in members with the new array. Therefore from this point on you’ll
    no longer mutate followList.data, even with a push, as the reference has changed to a new entity.

When trying to set your initial members and dataset, I suggest using an initialization method that creates a clone of your followList and writes that to dataset, and running this on the created() or mounted() hook of your component lifecycle. Then create a computed property for members, no need to store followList.data thrice and potentially have dataset and members diverge.

👤Excalibaard

2👍

In JavaScript, the properties of an Object that are also Objects themselves, are passed by reference, and not by value. Or you might say that they are shallow copied.

Thus, in your example, this.members and this.followList.data are pointing to the same variable in memory.
So, if you mutate this.members, it will mutate this.followList.data as well.

You could avoid this by doing a deep copy of the objects. The easiest method, and arguably the fastest, would be to use JSON.parse(JSON.stringify(obj)), but look at this answer for more examples.

data() {
    return {
      members: [],
      dataset: [],
    };
},
created() {
    this.members = JSON.parse(JSON.stringify(this.followList.data));
    this.dataset = JSON.parse(JSON.stringify(this.followList));
}
👤Dev Catalin

Leave a comment