Upon observation, I noticed that when a regular property originating from data() and a computed property derived from it are both sent through an event, the former maintains its reactivity while the latter loses it.
To test this scenario, I created the following example (also available on JSFiddle):
const EventBus = new Vue();
Vue.component('comp', {
data() {
return {
arrData: ['a', 'b']
};
},
computed: {
arrComputed() {
return this.arrData.map((e) => e.toUpperCase());
}
},
// Template code omitted for brevity...
});
Vue.component('othercomp', {
data() {
return {
items1: [],
items2: []
}
},
mounted() {
EventBus.$on('pass', this.receive);
},
// Template code omitted for brevity...
});
var app = new Vue({
el: '#app',
components:['comp', 'othercomp']
})<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<comp></comp>
<othercomp></othercomp>
</div>What causes the difference in behavior between a computed property and a normal property when passed through an event?
While it's advised against sending reactive objects like this, as mentioned in a previous question, I am still curious about the underlying reason for this discrepancy.