vue計算屬性computed和偵聽器watch的使用場景

原文連接: https://dsx2016.com/?p=679
微信公衆號: 大師兄2016

特色和區別

vue的computed選項主要用於同步對數據的處理,而watch選項主要用於事件的派發,可異步.

這二者都能達到一樣的效果,可是基於它們各自的特色,使用場景會有一些區分.

computed擁有緩存屬性,只有當依賴的數據發生變化時,關聯的數據纔會變化,適用於計算或者格式化數據的場景.

watch監聽數據,有關聯可是沒有依賴,只要某個數據發生變化,就能夠處理一些數據或者派發事件並同步/異步執行.

計算屬性

抽象的概念不容易理解,用多了高頻的場景天然就熟悉了,計算屬性表現爲同步處理數據.

金融領域的分期付款,P2P年化收益,帶有計算性質的,均可以優先考慮computed.

不須要關注點擊事件或者其餘數據,只要將計算規則寫在屬性裏,就能實時獲取對應的數據.

電商領域的購物車統計,一個數據依賴於一個或者多個數據.

當購物車數量和產品變化時,自動計算出價格*數量的總和.

若是有優惠券或者折扣,自動減去優惠和計算折扣金額便可,同上實時計算.

只要購買數量,購買價格,優惠券,折扣券等任意一個發生變化,總價都會自動跟蹤變化.

偵聽器

watch偵聽器能作到的計算屬性computed也能作到,何時適合用偵聽器呢?

主要適用於與事件和交互有關的場景,數據變化爲條件,適用於一個數據同時觸發多個事物.

如當借款額度大於可借額度時,彈出toast提示,並將當前借款額度調整到最大額度.

能夠看到,數據的變化爲觸發彈框提示,有且僅在必定金額條件下才觸發,而不是實時觸發.

抽象概念

彈框提示等事件交互的,適用於watch,數據計算和字符處理的適用於computed

computer

一個姓輸入框,一個名輸入框,實時展現全名.

<div id="name">  {{fullName}}  </div>

<script>
    export default {  
        name: 'test',  
        data: {  
            firstName: 'da',  
            lastName: 'shixiong',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    }
</script>

watch

一個金額輸入框,監聽金額數值大小,達到條件時給出舒適提示

<div id="Amount">  
    <input v-model="Amount" /> 
</div>

<script>
    export default {  
        name: 'test',  
        data: {  
            Amount: 100,  
        },  
        watch: {  
            Amount: function (newVal,oldVal) {  
                if(newVal>5000) {
                    alert("最大額度可借5000元")
                    this.Amount=5000
                }
            }  
        }  
    }
</script>