原文鏈接: 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>
