编辑:根据社区的要求添加了更多的上下文代码。
我有一个Vue.js 2应用程序，我现在维护的地方有一个计算属性。这个computed属性有一个return语句，它以逗号分隔的格式返回几个数据属性，整个组用括号括起来。
我试着看Javascript和Vue.js 2文档，我不知道这是做什么。在Javascript中，如果你想返回多个值，你应该返回一个包含这些值的数组或一个具有多个属性的对象。
这是另一件奇怪的事情。这个"compoundFormProperty"在组件模板中没有使用Computed属性!在compoundformproperty上有一个监视器财产。我搜索了整个代码库，然后找到了comoundformproperty。只存在于这一个组件中。由于它不是组件所使用的模板,我认为这是被用来跟踪一些内部状态(我认为这是用来检查表单是否有效)。其余的计算属性有get()和set()调用，因此它们似乎引用了存储数据的Vuex存储。
<script>
import { mapState } from "vuex";
export default {
name: "DeliveryAddress",
components: {},
props: {
countries: Array,
usStates: Array,
canStates: Array,
errorsCount: Number,
isEdit: Boolean,
selectedAddress: Boolean,
sameAsBilling: Boolean
},
data: function() {
return {
sameAddress: false,
saveAddress: false,
nameEmpty: true,
nameTouched: false,
addressEmpty: true,
addressTouched: false,
cityEmpty: true,
cityTouched: false,
postalTouched: false,
invalidDeliveryPostal: true,
invalidBillingPostal: true,
formTouched: false,
storedInfo: {},
cancel: false,
editInvalid: false,
saveInProgress: false,
sameBilling: this.sameAsBilling
};
},
computed: {
formInvalid: {
get() {
if (this.selectedAddress) {
return false;
}
return (
this.formTouched === false ||
this.nameEmpty ||
this.cityEmpty ||
this.addressEmpty ||
this.invalidDeliveryPostal
);
}
},
compoundFormProperty: function() {
return (
this.deliveryName,
this.deliveryCity,
this.deliveryAddress,
this.deliveryState,
this.deliveryCountry,
this.deliveryPostal,
Date.now()
);
},
...mapState([
"name",
"city",
"address",
"addressTwo",
"country",
"state",
"postal",
"cartObj",
"accountObj"
]),
cartObj: {
get() {
return this.$store.state.cartObj;
},
set(value) {
this.$store.commit("setCart", value);
}
},
deliveryName: {
get() {
return this.$store.state.deliveryName;
},
set(value) {
this.$store.commit("setDeliveryName", value);
}
},
deliveryAddress: {
get() {
return this.$store.state.deliveryAddress;
},
set(value) {
this.$store.commit("setDeliveryAddress", value);
}
},
deliveryAddressTwo: {
get() {
return this.$store.state.deliveryAddressTwo;
},
set(value) {
this.$store.commit("setDeliveryAddressTwo", value);
}
},
deliveryCity: {
get() {
return this.$store.state.deliveryCity;
},
set(value) {
this.$store.commit("setDeliveryCity", value);
}
},
deliveryState: {
get() {
return this.$store.state.deliveryState;
},
set(value) {
this.$store.commit("setDeliveryState", value);
}
},
deliveryCountry: {
get() {
return this.$store.state.deliveryCountry;
},
set(value) {
this.$store.commit("setDeliveryCountry", value);
}
},
deliveryPostal: {
get() {
return this.$store.state.deliveryPostal;
},
set(value) {
this.$store.commit("setDeliveryPostal", value);
}
},
accountObj: {
get() {
return this.$store.state.accountObj;
},
set(value) {
this.$store.commit("setAccount", value);
}
}
},
watch: {
compoundFormProperty() {
if (this.sameBilling || this.selectedAddress) {
this.$emit("change", { errors: false });
} else if (
this.deliveryName &&
this.deliveryCity &&
this.deliveryAddress &&
this.deliveryState &&
this.deliveryCountry &&
this.invalidDeliveryPostal === false
) {
this.$emit("change", { errors: false });
} else if (
this.isEdit &&
this.deliveryName &&
this.deliveryCity &&
this.deliveryAddress &&
/^[-/w ]{2,12}$/.test(this.deliveryPostal)
) {
this.editInvalid = false;
} else {
this.$emit("change", { errors: true });
this.editInvalid = true;
}
}
//Other watchers
}
}
</script>
JavaScript函数不能返回多个值。以逗号分隔的表达式求值到最后一个，即compoundFormProperty返回Date.now()。
返回逗号分隔的表达式而不是数组可能是错误的。但是在这里，它看起来像一个hack来触发computed属性中的反应性。
由于Vue反应性的工作原理，deliveryName等属性被标记为在this上访问时被跟踪。compoundFormProperty将在实例属性的任何变化中运行，这些属性是在computed property中访问的。
显式的且不太粗糙的方法是将其重写为集合监视器:
data() {
return { compoundFormProperty: null, ... }
},
created() {
this.$watch(
['deliveryName', ...],
() => {
this.compoundFormProperty = Date.now()
},
{ immediate: true }
);
}
根据使用的不同，结果可能有所不同，具有immediate的观察者会立即分配compoundFormProperty值，而计算属性在第一次访问时计算。
UPD:原始帖子中compoundFormProperty计算属性和监视器的组合是一个非常hack的方式来编写this.$watch与数组输入，可能是因为开发人员没有意识到这一点，或者代码派生自Vue 1。没有特定功能的手表系列。Date.now()值被有效地忽略，并用于不缓存计算。