vue computed 使用小问题

TNFE 发布于2019-08-22 10:36 / 601人阅读

这个是一个vue 中 computed 的一个小问题
解决方案是通过提issue 解决的，issue链接

Vue.js version

1.0.26

实例

jsfiddle

代码部分


  
    添加 {{ goods | json }}
    
 {{ result }}

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

GPU云服务器云服务器 vue使用webrtc vue 中使用 webrtc vue怎么使用webRTC vue中使用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90924.html

终极蛇皮上帝视角之微信小程序之告别 setData

摘要：而小程序官方的是在中调用方法来改变数据，从而改变界面。为了写测试让咱们来重构一把，利用学习过的函数式编程中的高阶函数把依赖注入。也就是说当中的某个数据更新的时候，我们并不知道它会影响哪个中的属性，特别的还有依赖于的情况。众所周知 Vue 是借助 ES5 的 Object.defineProperty 方法设置 getter、setter 达到数据驱动界面，当然其中还有模板编译等等其他...

wuyumin 2019-08-23 10:58 评论0 收藏0
从 VantComponent 谈小程序维护

摘要：不多废话，先说结论小程序组件写法这里就不再介绍。在官方文档中，我们可以看到使用构造器构造页面事实上，小程序的页面也可以视为自定义组件。经过一番测试，得出结果为为了简便。毕竟官方标准，不用担心其他一系列后续问题。在开发小程序的时候，我们总是期望用以往的技术规范和语法特点来书写当前的小程序，所以才会有各色的小程序框架，例如 mpvue、taro 等这些编译型框架。当然这些框架本身对于新开...

worldligang 2019-08-23 17:10 评论0 收藏0
美团小程序框架mpvue蹲坑指南

摘要：这个是我们约定的额外的配置这个字段下的数据会被填充到顶部栏的统一配置美团汽车票同时，这个时候，我们会根据的页面数据，自动填充到中的字段。美团小程序框架mpvue(花名：没朋友)蹲坑指南第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各种限制折腾的死去活来的,单向绑定,没有promise,请求数限制,包大小限制,各种反人类,...反正我是感受到了满满的恶意.最近接到一个工...

AprilJ 2019-08-22 16:01 评论0 收藏0
Vue中如何使用方法、计算属性或观察者

摘要：如何实现一个查看在线在中我们放置了一些事件处理方法，我们可以在事件绑定中直接应用，不会依赖于任何的属性。例如计算属性依赖于属性，只要属性发生变化，我们的也会发生变化，从而筛选出我们需要的数据。熟悉 Vue 的都知道方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用，有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的，但是...

zhaot 2019-08-23 12:37 评论0 收藏0
vue中的computed的this指向问题

摘要：今天在写项目时，用到了计算属性，遇到了使用箭头函数出现指向问题，这里记录下箭头函数中的箭头函数内部的是词法作用域，由上下文确定函数体内的对象，就是定义时所在的对象，而不是使用时所在的对象中的使用箭头函数不使用箭头函数使用自己的理解在中使用箭今天在写vue项目时，用到了computed计算属性，遇到了使用箭头函数出现this指向问题，这里记录下 1.箭头函数中的this 箭头函数内部...

crossoverJie 2019-08-23 13:53 评论0 收藏0