瞭解vue計算屬性和methods、watched

前言

在咱們的模板中，咱們一直都只綁定簡單的屬性鍵值。但實際上，對於全部的數據綁定， Vue.js 都提供了徹底的 JavaScript表達式支持，可是若是在模板中放入過多的邏輯會讓模板太重，尤爲當這種代碼不止一次出現的時候。因此當遇到複雜的邏輯時，你能夠選擇使用計算屬性

這裏我用一個簡單的相加的例子，先來看一下計算屬性和其餘方式下實現的效果。

1.計算屬性

計算屬性——當其依賴屬性的值發生變化時，這個屬性的值會自動更新，與其相關的DOM部分也會同步自動更新

<div class="">computed:</div>
    <input type="text" v-model="num1" >
    <input type="text" v-model="num2" >
    <input type="text" :value="addnum" >
複製代碼

computed:{
        addnum:{
        //getter
            get:function(){
            return parseInt(this.num1)+parseInt(this.num2)
            }
            //setter
            set:function(){
                //......
            }
        }
      },
複製代碼

其中addnum是計算屬性，在默認的getter裏，當計算屬性裏依賴的num1,num2的值變化後，addnum就會執行，不然他就使用上一次的計算結果，計算屬性裏，若是有須要，還能夠提供setter，這裏當計算屬性改變時，會執行相應的方法。

2.methods

固然咱們也能夠用一個簡單的方法來計算

<div class="">methods:</div>
    <input type="text" v-model="num5" >
    <input type="text" v-model="num6" >
    <input type="text" :value="add()" >
複製代碼

methods:{
    add(){
      return parseInt(this.num5)+parseInt(this.num6)
    }
  }
複製代碼

3.watched

除了上面兩種外，還可使用vue提供的$watch，監聽data裏面數據的變化

<div class="">watch:</div>
    <input type="text" v-model="num3" >
    <input type="text" v-model="num4" >
    <input type="text" :value="addnum2" >
複製代碼

watch:{
    num3:function(newvalue){
      this.num3 = newvalue;
      this.later_add();  //交給一個方法，能夠異步執行
    },
    num4:function(newvalue){
      this.num4 = newvalue;
      this.later_add();
    }
  },
methods:{
    later_add(){
      setTimeout(() => {
        this.addnum2 = parseInt(this.num3) + parseInt(this.num4)
      }, 2000);
    }
  }
複製代碼

比較、總結

1.計算屬性與methods

相比於方法，計算屬性基於它的依賴緩存，只有當其依賴的值發生變化的時候，纔會觸發從新計算，而不像普通的方法函數，每當從新渲染的時後，都會從新執行一遍。

2.計算屬性和watched

watch:{
    num3:function(newvalue){
      this.num3 = newvalue;
      this.later_add();  //交給一個方法，能夠異步執行
    },
    num4:function(newvalue){
      this.num4 = newvalue;
      this.later_add();
    }
}，
methods:{
    later_add(){
      setTimeout(() => {
        this.addnum2 = parseInt(this.num3) + parseInt(this.num4)
      }, 2000);
    }
  }
複製代碼

這裏的代碼感受像是重複的，每一個值都要寫一份這樣相似的代碼，可是你仔細發現，這裏還可調用別的函數，在這個操做下，咱們就能夠實現異步操做（固然我這裏只是一個簡單的延遲執行，可是殊途同歸嘛），這是計算屬性沒法作到的。