Javascript Vue.js中计算属性和正常数据之间的差异

我观察到，当来自

data（）

的正常属性和来自它的计算属性通过事件时，前者保持其反应性，而后者则失去反应性

我为它设置了以下测试用例（如果您愿意）：

const EventBus=new Vue（）；
Vue.组件（“组件”{
数据（）{
返回{
数据：['a'，'b']
};
},
计算：{
arrComputed（）{
返回此.arrData.map（（e）=>e.toUpperCase（））；
}
},
模板：`
原始数组：{{arrData}}
计算数组：{{arrComputed}}
移走
删除b
穿越事件
从头开始
从头开始
`,
方法：{
删除（名称）{
name=name.toLowerCase（）；
if（this.arrData.indexOf（name）！=-1）{
this.$delete（this.arrData，this.arrData.indexOf（name））；
}
},
通过（）{
EventBus.$emit（'pass'，this.arrData，this.arrComputed）；
},
重置（）{
this.$set（this.arrData，0，'a'）；
this.$set（this.arrData，1，'b'）；
},
resetHard（）{
this.arrData=['a'，'b']；
}
}
});
Vue.组件（“其他组件”{
数据（）{
返回{
项目1:[]，
项目2:[]
}
},
安装的（）{
EventBus.$on（'pass'，this.receive）；
},
模板：`
原始数组：{{items1}}
计算数组：{{items2}}
`,
方法：{
接收（项目1、项目2）{
this.items1=items1；
this.items2=items2；
}
}
});
var app=新的Vue({
el:“#应用程序”，
组件：['comp'，'othercomp']
})

---

我不希望这样做奏效。通过返回

map（）。此副本不会对原始阵列的更改做出反应-它是一个完全不同的阵列。即使计算属性将在
arrData
更改时更新，它也不会自动向第二个组件发送另一个事件，告诉它更新其数据数组。我认为这两个组件都需要一个计算属性——可以使用mixin或filter（在这种情况下可能更合适）以干燥的方式完成这项工作

您可以在计算函数中触发事件。但对我来说，这似乎有点骇人听闻：

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

我观察到，当一个普通属性来自data（）和
从中派生的计算属性通过事件传递，
前者保持反应性，而后者则失去反应性

对象变量（数组是对象）包含对对象的引用（或句柄）。将一个对象变量指定给另一个对象时，将复制句柄，并且两个变量都是一个对象的句柄。一个对象上的对象操作将被另一个对象“看到”

那以后呢

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

foo
和
bar
都是
[1,2]
，因为它们指的是同一个对象。传递值的方式相同，但更容易用简单的赋值来说明

应该清楚的是

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

为
foo
指定一个新句柄，使其不再引用与
bar
相同的数组

在您的示例中，
arrComputed
每次
arrData
更改时都会创建一个新的数组对象。因此，当您传递
arrComputed
时，您传递的是它上次运行时创建的句柄。当
arrData
更改时，
arrComputed
创建一个新的数组对象，但旧句柄的接收者没有得到该对象，与句柄关联的数组永远不会更新。
我知道对象引用在JS中是如何工作的——我的误解是，我认为传递
arrComputed
将传递对计算属性的引用（在抽象意义上，认为是包装器对象），而不是该计算属性的实际值。谢谢你给我指出了正确的方向（没有双关语）。