vue computed 使用小問題

這個是一個vue 中 computed 的一個小問題
解決方案是經過提issue 解決的，issue連接

Vue.js version

1.0.26

實例

jsfiddle

代碼部分

<div id="app">
  <div class="hello">
    <h1 @click="add()">添加</h1> {{ goods | json }}
    <br/> {{ result }}
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    goods: [],
  },
  methods: {
    add() {
      const good = {
        number: 1
      };
      this.goods.push(good);
      console.log(this.goods);
    }
  },
  computed: {
    // 一個計算屬性的 getter
    result: function() {
      let number = 0;
      for (let i in this.goods) {
        number += this.goods[i].number;
      }
      return number;
    }
  }
})

關鍵的部分是在

// 一個計算屬性的 getter
    result: function() {
      let number = 0;
      for (let i in this.goods) {
        number += this.goods[i].number;
      }
      return number;
    }

採用這樣的計算方式在特定的手機上是有問題的，

測試結果

左邊是 ios 9.3.4 iphone 6 plus
右邊是 個人小米手機

有問題的設備

ios 9.3.3 and 9.3.4 iphone 6s plus or iphone 5s

沒問題的設備

ios 8.2 iphone 6 ，some android phone，PC chrome

解決方案

改變一下寫法就能夠了

result: function() {
    return this.goods.reduce((sum, good) => sum + good.number, 0)
  }

具體是由於什麼形成的可能涉及的比較多，我就暫時不去探討了。
另外在寫js 的時候最好遵照 airbnb 規則，能夠更好的避免出現問題