为什么this.scode会在计算属性会被打印2次，一次是undifind 后来才是4.2

Question

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
 }

Answer 1

ustbhuangyi 2017-10-26 00:08:41

因为它的初始值就是 undefined，数据请求到才会有值。

• 小白师兄 #1

  哇塞，老师好巧啊，您看看我下面说的是不是这个理，如果理解有错误的地方指正一下呗，哈哈！

• ustbhuangyi 回复 小白师兄 #2

  理解没啥问题，不过我的代码就是 score 啊，为啥你写 scode

• 小白师兄 回复 ustbhuangyi #3

  因为这个问问题的同学写的叫做scode,为了方便他，其实我也有此疑问啊。。

点开查看后面2条评论

Answer 2

小白师兄 2017-10-26 00:08:30

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，而不是两次；

• 提问者 qq_里_1 #1

  说的很好，很感谢