Difference Between Computed Property And Normal Data In Vue.js

I observed that when a normal property that came from data() and a computed property that is derived from it are passed through an event, the former keeps its reactivity while the

Solution 1:

I would not expect this to work. By returning the results of map() you are passing a copy of the reactive array to the other component. This copy will not react to changes of the original array — it's a totally different array. And even though the computed property will update when arrData changes, it won't automatically send another event to the second component telling it to update it's data array. I would think you'll need a computed property on both components — you could do this in a DRY fashion with a mixin or filter (which is probably more appropriate in this case).

You could fire the event in the computed function. But this seems pretty hacky to me:

arrComputed() { 
   let newArray = this.arrData.map((e) => e.toUpperCase());
   EventBus.$emit('pass', this.arrData, newArray);
   return newArray
}

Solution 2:

I observed that when a normal property that came from data() and a computed property that is derived from it are passed through an event, the former keeps its reactivity while the latter loses it.

An object variable (an Array is an object) contains a reference (or handle) to the object. When you assign one object variable to another, the handle is copied, and both variables are handles to one object. Object operations on one will be "seen" by the other.

So after

foo = [1];
bar = foo;
foo.push(2);

both foo and bar, since they refer to the same object, would be [1, 2]. Passing values works the same way, but it's easier to illustrate with simple assignments.

It should be clear that

foo = [1];
bar = foo;
foo = [1, 2];

assigns a new handle to foo, so it no longer references the same array that bar does.

In your example, arrComputed creates a new Array object every time arrData changes. So when you pass arrComputed, you are passing the handle it created the last time it ran. When arrData changes, arrComputed creates a new Array object, but the recipient of the old handle doesn't get that, and the Array associated with its handle is never updated.