Vue中計算屬性和偵聽器

在Vue中通常我們會在模板繫結表示式，模板是用來描述檢視結構的。如果模板中的表示式存在過多的邏輯性語句，那麼整個模板就會變得特別的臃腫，可讀性和維護性將會降低，因此為了簡化邏輯，我們會使用計算屬性

基本用法：

computed:{
A:function(){
return B+C
}
}

如果學過面嚮物件語言，應該知道物件導向的標準之一封裝，需要getter也需要setter，而上面的寫法，實際上只寫了getter而沒有寫setter

那麼我們就可以換種寫法

computed:{
A:{
get:function(){
return B+C
}
set:function(newVal){
var names=newVal.splir(' ')
this.B=names[0]
this.C=names[1]
}
}
}

這樣寫就明瞭很多了

這個時候，可能會奇怪，似乎計算屬效能做的用方法來也可以做

也就是

methods: {
  A: function () {
    return B+C
  }
}

實際上，計算屬性是基於他們的響應式依賴進行快取的，而方法不存在快取

而計算屬性的快取也有它的壞處，當重複呼叫時，就會發生一些多餘的步驟，導致大量不必要的運算

這時候就需要

cache：false

關閉快取

再來看他的快取方式，計算屬性是具有依賴性的，依賴data中的資料，如果資料改變，相應的就會改變，這就要說到另外一個東西：偵聽器
什麼是偵聽器呢？偵聽器用來偵聽資料的變化，如果資料發生變化就會觸發繫結的方法
偵聽器又有自己的應用場景： 資料變化執行時非同步或開銷比較大的操作
基本使用：

watch:{
firstN:function(val){
this.A=val+this.C
}
}

偵聽器，相比於計算屬性來說，是很容易重複的，所以Vue也建議，通常更好的做法是使用計算屬性而不是watch