vue computed 使用小問題

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

這個是一個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;
    }
  }
})

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

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

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

測試結(jié)果

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

有問題的設(shè)備

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

沒問題的設(shè)備

ios 8.2 iphone 6 ，some android phone，PC chrome

解決方案

改變一下寫法就可以了

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

具體是因為什么造成的可能涉及的比較多，我就暫時不去探討了。
另外在寫js 的時候最好遵守 airbnb 規(guī)則，可以更好的避免出現(xiàn)問題

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90924.html

相關(guān)文章

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

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

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

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

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

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

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

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

zhaot 2019-08-23 12:37 評論0 收藏0
vue中的computed的this指向問題

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

crossoverJie 2019-08-23 13:53 評論0 收藏0