首頁 > 文章 > web前端 > vue2.0監聽屬性的用法介紹總結

vue2.0監聽屬性的用法介紹總結

不言原創: 2018-07-18 09:26:341768瀏覽

我們在工作中常常需要監聽某一個屬性值的變化，這時候我們就需要用到了監聽屬性watch，在這裡我總結watch屬性的三種場景使用希望對你有所幫助：

1.基礎版監聽：

場景如下：輸入框輸入你的年齡，如果年齡在0-15歲提示訊息：你還是小孩，如果年齡在15-25歲，提示訊息：你已經是個少年，如果年齡在25歲以上，提示訊息：你已經長大了。根據需求配合監聽屬性我們得到下面的程式碼：

<template>
  <p id="app">
    年齡：<input type="number" v-model="age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </p>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      infoMsg:""
    }
  },
  watch:{
    age:function(val,oldval){
      if(val>0 && val<15){
        this.infoMsg="你还是个小孩"
      }else if(val>15 && val<25){
        this.infoMsg="你已经是个少年"
      }else{
        this.infoMsg="你已经长大了"
      }
    }
  }
}
</script>

這裡需要特別說明一下的是：監聽屬性方法中的兩個參數分別代表的意義：第一個val是當面正在監聽的屬性的值，oldval是屬性改變之前的值，由於這是形參的原因，參數的名字可以自己定義，但是參數所代表的含義是不會變化的。

2.進階版監聽：

下面我們改變一下需求：基礎規則不變，但是因為後台資料庫的變更（畫個圈圈咀咒他）我們需要提交一個這樣的資料結構

 data() {
    return {
      info: {
        age: ""
      },
      infoMsg: ""
    };
  },

由於我們監聽的是物件info中的屬性age值的變化，所以我們需要使用到的是深度監聽，具體程式碼如下：



<script>
export default {
  data() {
    return {
      info: {
        age: &quot;&quot;
      },
      infoMsg: &quot;&quot;
    };
  },
  watch: {
    info: {
      handler: function(val, oldval) {
        var that = this;
        if (val.age > 0 && val.age < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val.age > 15 && val.age < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

在這裡需要注意的有兩點：1，這裡的function不能使用箭頭函數來取代，如果使用箭頭函數的話，this的指向會是全域。 2，你會注意到這裡多加入一個屬性是deep，它的意義表示是否開啟深度監聽，如果開啟值為true，反之為false。

3.最高級監聽：

針對第二個案例不知道你有沒有發現一個問題：我們監聽的是一個物件裡面某個屬性的變化，但是如果當這個對象裡面有很多個值的時候，雖然也可以使用第二種方法進行監聽，但是這將會是對資源的一種極大的浪費，這算是一個監聽缺陷，身為一個嚴謹的程式設計師（微笑臉），絕對不能允許這樣的事情發生，所以我們可以結合computed（計算屬性）對上面的程式碼進行最佳化：

<template>
  <p id="app">
    年齡：<input type="number" v-model="info.age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </p>
</template>

<script>
export default {
  data() {
    return {
      info: {
        age: "",
        name: "",
        hobit: ""
      },
      infoMsg: ""
    };
  },
  computed: {
    ageval: function() {
      return this.info.age;
    }
  },
  watch: {
    ageval: {
      handler: function(val, oldval) {
        var that = this;
        if (val > 0 && val < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val > 15 && val < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

透過上面的我們看出，這次我們監聽的是計算屬性ageval，而計算屬性回傳的則是info物件中age的值，與第二次的程式碼進行比較我們可以發現兩次程式碼中監聽的一個是物件info，一個是info物件中age的值，效能大大增強，這就是我們期待的結果了。

vue2.0監聽屬性的用法介紹總結

1.基礎版監聽：

2.進階版監聽：

3.最高級監聽：

相關文章