为什么this.scode会在计算属性会被打印2次，一次是undifind 后来才是4.2
来源：16-13 详情弹层页（4）- star组件使用
qq_里_1
2017-10-25
computed: {
starSize () {
return 'star-' + this.size
},
itemClasses () {
console.log(this.scode)
let result = []
let staron = Math.floor(this.scode)
for (let i = 0; i < staron.length; i++) {
result.push(starOn)
}
if (this.scode !== Math.floor(this.scode)) {
result.push(starHalf)
}
while (result.length < LENGTH) {
result.push(starOff)
}
return result
}
2回答
-
ustbhuangyi
2017-10-26
因为它的初始值就是 undefined，数据请求到才会有值。
052017-10-26 -
小白师兄
2017-10-26
1、先理解一句话，Vue的计算属性依赖于数据属性的改变，对于依赖属性的任何改变都会触发计算属性的逻辑；
2、也就是说，只要在data属性中，scode改变（分数应该叫score吧，不知道你为啥叫做scode），就会触发computed计算属性，而data中scode的值默认是未指定的，因此，第一次加载就会输出undefined；
3、再来说为啥输出4.2，当视图加载，从后台获取到scode的值后（4.2），data中scode值从undefined变成了4.2，计算属性就又会相应scode的值的变化，将它更改成4.2，所以又会打印出最终的4.2值;
4、总结一下就是，计算属性执行了两边，第一遍是默认为undefined的时候，第二次是获取到4.2的时候；
5、你如果想验证可以在data中默认给scode一个值，比如1，那么页面就会输出两次，一次1，一次4.2；如果你默认给4.2，那么就只会输出一次4.2，而不是两次；
012017-10-26
相似问题