美文网首页
vue computed 使用小问题

vue computed 使用小问题

作者: 风吹枫落van | 来源:发表于2016-09-08 13:57 被阅读1772次

    这个是一个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
    右边是 我的小米手机


    result

    有问题的设备

    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 规则,可以更好的避免出现问题

    相关文章

      网友评论

          本文标题:vue computed 使用小问题

          本文链接:https://www.haomeiwen.com/subject/tcbzjttx.html