Vue 2 | Part 6 計算屬性

legendmohe 發布于2019-08-20 13:57 / 1737人閱讀

摘要：另外初始化自己手上持有現金。讓購入的游戲顯示在已入清單中，并從愿望清單中移除直接用方法篩選出所有字段為的游戲，結果綁定到已入清單。計算當前余額最后，使用現金總額減掉已入游戲的總價，就得到當前余額啦。

在這之前，我們往html里面綁定的數據，都是非常直接的。給定一個值，就直接綁定它了。

但是更多的情況下，我們在綁定之前，需要對這些數據做一些處理。這就是計算屬性發揮作用的地方了。

有了前面各期知識的加成，這次我們來一個好玩的。我們做一個愿望清單，列表里面是想買的PS4游戲：

點擊購買某個游戲之后，它會自動從愿望清單移除，出現在已入游戲列表里面。同時，余額也相應減少：

當然，這里不涉及任何的真實貨幣結算，只是點擊一下按鈕，做出余額相應減少和兩邊列表更新的效果。

注：游戲價格是PSN上面2016圣誕元旦這段期間的價格，查的當時是港元，所以我們整個demo就使用港元作為貨幣單位了。

為了避免篇幅過長，這一期的代碼只截取重點部分，完整的代碼請看github代碼庫的版本。

本期的簡單database

我把查詢到的數據弄成了一個小DB，放在gamesDB.js文件里面，主要是用來做列表循環，下面是它的樣子：

// gamesDB.js
var games = [
    {
        "id"       : 0,
        "name"     : "神秘海域123",
        "img"      : "../static/images/uncharted-collection.jpg",
        "price"    : 160.80,
        "purchased": false
    },
    /* 余下的部分省略 */
]

purchased字段表示該游戲是否已購入，初始時所有為false。

HTML拆解

使用大胡子語法綁定余額myBalance

在這個demo里面會全部使用大胡子語法。因為會遇到像下面這樣，需要在數據前后加額外文字的情況。如果一些地方用v-text，一些地方用大胡子，代碼會很難分辨，所以就統一用大胡子了。

另外，跟金錢有關的部分都會使用toFixed方法來保留兩位小數。


    我的余額：HK$ {{ myBalance.toFixed(2) }}

v-for循環列表

循環愿望清單wishList：


    
    
    
        {{ item.name }}
        HK$ {{ item.price.toFixed(2) }}

已入游戲列表myGames的循環同理，只是會減少一些UI：


    
    
        {{ item.name }}

初始的JS

window.games是為了方便，我在gamesDB.js里面直接把db掛了在window對象下。在實際工作用請一定要避免這種做法。引入了gamesDB.js之后，data.games就有了我準備好的數據庫里面的數據了。

另外初始化自己手上持有現金5000。

var app = new Vue({
    el: "#app",
    data: {
        games: window.games,
        myCash: 5000
    }
})

處理點擊事件

通過ID找到對應的游戲，修改purchased字段為true。ID會在html的綁定中傳入：@click="buyGame(item.id)"。

var app = new Vue({
    el: "#app",
    data: {
        games: window.games,
        myCash: 5000
    },
    methods: {
        buyGame: function (id) {
            this.games[id].purchased = true
        }
    }
})

讓購入的游戲顯示在已入清單中，并從愿望清單中移除

直接用filter方法篩選出所有purchased字段為true的游戲，結果綁定到已入清單。同理，愿望清單中只篩選字段值為false的游戲。

var app = new Vue({
    el: "#app",
    data: {
        games: window.games,
        myCash: 5000
    },
    methods: {
        buyGame: function (id) {
            this.games[id].purchased = true
        }
    },
    computed: {
        wishList: function () {
            return this.games.filter(function (game) {
                return !game.purchased
            })
        },
        myGames: function () {
            return this.games.filter(function (game) {
                return game.purchased
            })
        }    
    }
})

在這里大家肯定都有一個疑問，computed里面的方法和methods里面的方法，到底有什么不同？它們看上去都是一樣的啊。

區別就在于computed里面的方法會進行緩存，只要方法依賴的數據源不改變，它們就不會被執行。我們用一個很簡單的例子快速說明一下：

在我的余額下面插入一個h2：

data.myCash: {{ showCash }}

在計算屬性里面增加一個showCash方法，直接console里面log一下就知道它有沒有執行過：

var app = new Vue({
    /* 省略其它代碼 */
    computed: {
        showCash: function () {
            console.log("showCash in computed properties")
            // 注意這里是myCash，它在這次的例子中是一直不變的
            return this.myCash
        }
    }
})

進入頁面的時候執行了一次（留意一下，不變的數字是為了說明而新加的h2，用鼠標選中了文字的）：

點擊購買游戲（圖中可以看到神秘海域已經點擊購買了，所以不在愿望清單中），console中沒有出現新log，說明computed里面的showCash方法沒有再次執行：

也就是說，如果showCash方法認為它所依賴的數據this.myCash沒有發生變化，它就不會再執行，而是直接返回之前已經計算好的值。

只有在它依賴的數據修改的情況下，才會進行更新：

然后我們修改一下html里面的調用方式，在methods里面增加同樣的方法：

記得要先屏蔽掉computed里面的同名方法，否則會報錯。

data.myCash: {{ showCash() }}

var app = new Vue({
    /* 省略其它代碼 */
    methods: {
        showCash: function () {
            console.log("showCash in methods")
            return this.myCash
        }
    }
})

進入頁面的時候執行了一次：

點擊購買游戲，log增加：

可見，即使數據源沒有改變，methods里面的showCash方法依然會執行多次。

計算當前余額

最后，使用現金總額減掉已入游戲的總價，就得到當前余額啦。

var app = new Vue({
    // 省略其它代碼
    computed: {
        myBalance: function () {
            var sum = 0
            this.myGames.forEach(function (item, index) {
                sum += item.price
            })
            return this.myCash - sum
        }
    }
})

這期就到這里，敬請期待下一期：組件。

寫在最后

源碼地址：https://github.com/levblanc/v...

視頻攻略：小的不才，為求一贊，自制本期視頻攻略在此。

GPU云服務器云服務器 vue的計算屬性 Part-2 vue實例屬性 vue.js 屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81334.html

VUE - MVVM - part10 - Computed

摘要：了解之后我們來實現它，同樣的為了方便理解我寫成了一個類這里的一般是的實例將屬性代理到實例下的構造函數我們實現了代理屬性和更新計算屬性的值，同時依賴沒變化時，也是不會觸發的更新，解決了以上的個問題。看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。回顧先捋一下，之前我們實現的 Vue 類，主要有一下的功能：屬性和方法的代理 proxy 監聽屬性 watche...

callmewhy 2019-08-26 11:53 評論0 收藏0
Vue 2 | 基礎API系列文章合集

摘要：在大家的鞭策和鼓勵下，這個基礎的系列終于完成了。關于更新的頻率，因為是我自己一個人在做，文案視頻都準備好了才發的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因為公司放假了。不過月份的更新速度真的不能保證，抱歉。在大家的鞭策和鼓勵下，這個基礎API的系列終于完成了。所幸是沒有真的更到一百期才完結（笑）。最初是因為覺得錄視頻好玩，才挖的這個坑。也想過中途放棄，關掉專欄，但由于...

instein 2019-08-20 14:00 評論0 收藏0
Vue 2 | Part 7 組件

摘要：因為這里會舉一連串的例子，就直接用來作為組件名稱了。這是一個組件名稱定義的時候有一點需要注意的，就是要使用中劃線分詞。在組件的方法里面返回數據就可以了。在的組件中間定義的內容，就會被插入到的位置中去。敬請期待下一期，組件通信。界面寫多了，大家應該都會想到一個問題：JS的模塊寫好以后可以在多個地方重復使用，HTML有沒有辦法做到呢？Vue給了我們這個能力，使用組件，就可以輕松做到。最...

xcold 2019-08-20 13:56 評論0 收藏0
Vue 2 | Part 5 列表渲染和事件監聽

之前在vue里面綁定數據，都只是單個地綁定。這期我們來看一下怎樣渲染列表，然后通過事件監聽方法往列表里面增加item。列表渲染廢話不多說，直接上代碼： {{ item }} var app = new Vue({ el: #app, data: { list: [ ...

Nekron 2019-08-20 13:55 評論0 收藏0
VUE - MVVM - part5 - Observe

摘要：具體代碼執行方式進入到的目錄下，命令行運行即可。確保為一個對象如果對象下有則不需要再次生成函數返回該對象的實例，這里判斷了如果該對象下已經有實例，則直接返回，不再去生產實例。這就確保了一個對象下的實例僅被實例化一次。看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。回顧在 step4 中，我們大致實現了一個 MVVM 的框架，由3個部分組成： defineRe...

xi4oh4o 2019-08-22 16:23 評論0 收藏0