vue computed 使用小問(wèn)題

TNFE 發(fā)布于2019-08-22 10:36 / 652人閱讀

這個(gè)是一個(gè)vue 中 computed 的一個(gè)小問(wèn)題
解決方案是通過(guò)提issue 解決的，issue鏈接

Vue.js version

1.0.26

實(shí)例

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: {
    // 一個(gè)計(jì)算屬性的 getter
    result: function() {
      let number = 0;
      for (let i in this.goods) {
        number += this.goods[i].number;
      }
      return number;
    }
  }
})

關(guān)鍵的部分是在

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

采用這樣的計(jì)算方式在特定的手機(jī)上是有問(wèn)題的，

測(cè)試結(jié)果

左邊是 ios 9.3.4 iphone 6 plus
右邊是我的小米手機(jī)

有問(wèn)題的設(shè)備

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

沒(méi)問(wèn)題的設(shè)備

ios 8.2 iphone 6 ，some android phone，PC chrome

解決方案

改變一下寫法就可以了

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

具體是因?yàn)槭裁丛斐傻目赡苌婕暗谋容^多，我就暫時(shí)不去探討了。
另外在寫js 的時(shí)候最好遵守 airbnb 規(guī)則，可以更好的避免出現(xiàn)問(wèn)題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90924.html

相關(guān)文章

終極蛇皮上帝視角之微信小程序之告別 setData

摘要：而小程序官方的是在中調(diào)用方法來(lái)改變數(shù)據(jù)，從而改變界面。為了寫測(cè)試讓咱們來(lái)重構(gòu)一把，利用學(xué)習(xí)過(guò)的函數(shù)式編程中的高階函數(shù)把依賴注入。也就是說(shuō)當(dāng)中的某個(gè)數(shù)據(jù)更新的時(shí)候，我們并不知道它會(huì)影響哪個(gè)中的屬性，特別的還有依賴于的情況。眾所周知 Vue 是借助 ES5 的 Object.defineProperty 方法設(shè)置 getter、setter 達(dá)到數(shù)據(jù)驅(qū)動(dòng)界面，當(dāng)然其中還有模板編譯等等其他...

wuyumin 2019-08-23 10:58 評(píng)論0 收藏0
從 VantComponent 談小程序維護(hù)

摘要：不多廢話，先說(shuō)結(jié)論小程序組件寫法這里就不再介紹。在官方文檔中，我們可以看到使用構(gòu)造器構(gòu)造頁(yè)面事實(shí)上，小程序的頁(yè)面也可以視為自定義組件。經(jīng)過(guò)一番測(cè)試，得出結(jié)果為為了簡(jiǎn)便。畢竟官方標(biāo)準(zhǔn)，不用擔(dān)心其他一系列后續(xù)問(wèn)題。在開(kāi)發(fā)小程序的時(shí)候，我們總是期望用以往的技術(shù)規(guī)范和語(yǔ)法特點(diǎn)來(lái)書(shū)寫當(dāng)前的小程序，所以才會(huì)有各色的小程序框架，例如 mpvue、taro 等這些編譯型框架。當(dāng)然這些框架本身對(duì)于新開(kāi)...

worldligang 2019-08-23 17:10 評(píng)論0 收藏0
美團(tuán)小程序框架mpvue蹲坑指南

摘要：這個(gè)是我們約定的額外的配置這個(gè)字段下的數(shù)據(jù)會(huì)被填充到頂部欄的統(tǒng)一配置美團(tuán)汽車票同時(shí)，這個(gè)時(shí)候，我們會(huì)根據(jù)的頁(yè)面數(shù)據(jù)，自動(dòng)填充到中的字段。美團(tuán)小程序框架mpvue(花名：沒(méi)朋友)蹲坑指南第一次接觸小程序大概是17年初,當(dāng)時(shí)小程序剛剛內(nèi)側(cè),當(dāng)時(shí)就被各種限制折騰的死去活來(lái)的,單向綁定,沒(méi)有promise,請(qǐng)求數(shù)限制,包大小限制,各種反人類,...反正我是感受到了滿滿的惡意.最近接到一個(gè)工...

AprilJ 2019-08-22 16:01 評(píng)論0 收藏0
Vue中如何使用方法、計(jì)算屬性或觀察者

摘要：如何實(shí)現(xiàn)一個(gè)查看在線在中我們放置了一些事件處理方法，我們可以在事件綁定中直接應(yīng)用，不會(huì)依賴于任何的屬性。例如計(jì)算屬性依賴于屬性，只要屬性發(fā)生變化，我們的也會(huì)發(fā)生變化，從而篩選出我們需要的數(shù)據(jù)。熟悉 Vue 的都知道方法methods、計(jì)算屬性computed、觀察者watcher 在 Vue 中有著非常重要的作用，有些時(shí)候我們實(shí)現(xiàn)一個(gè)功能的時(shí)候可以使用它們中任何一個(gè)都是可以的，但是...

zhaot 2019-08-23 12:37 評(píng)論0 收藏0
vue中的computed的this指向問(wèn)題

摘要：今天在寫項(xiàng)目時(shí)，用到了計(jì)算屬性，遇到了使用箭頭函數(shù)出現(xiàn)指向問(wèn)題，這里記錄下箭頭函數(shù)中的箭頭函數(shù)內(nèi)部的是詞法作用域，由上下文確定函數(shù)體內(nèi)的對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象中的使用箭頭函數(shù)不使用箭頭函數(shù)使用自己的理解在中使用箭今天在寫vue項(xiàng)目時(shí)，用到了computed計(jì)算屬性，遇到了使用箭頭函數(shù)出現(xiàn)this指向問(wèn)題，這里記錄下 1.箭頭函數(shù)中的this 箭頭函數(shù)內(nèi)部...

crossoverJie 2019-08-23 13:53 評(píng)論0 收藏0