快捷導(dǎo)航

詳解vue2.0監(jiān)聽屬性的使用心得及搭配計算屬性的使用

更新時間：2018年07月18日 08:32:25 作者：瘋狂的小標(biāo)點

這篇文章主要介紹了vue2.0之監(jiān)聽屬性的使用心得及搭配計算屬性的使用,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

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

1.基礎(chǔ)版監(jiān)聽：

場景如下：輸入框輸入你的年齡，如果年齡在0-15歲提示信息：你還是個小孩，如果年齡在 15-25歲，提示信息：你已經(jīng)是個少年，如果年齡在25歲以上，提示信息：你已經(jīng)長大了。根據(jù)需求配合監(jiān)聽屬性我們得到下面的代碼：

<template>
 <div id="app">
  年齡：<input type="number" v-model="age"><br>
  提示信息：<span>{{infoMsg}}</span>
 </div>
</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="你已經(jīng)是個少年"
   }else{
    this.infoMsg="你已經(jīng)長大了"
   }
  }
 }
}
</script>

這里需要特別說明一下的是：堅挺屬性方法中的兩個參數(shù)分別代表的含義：第一個val是當(dāng)面正在監(jiān)聽的屬性的值，oldval是屬性改變之前的值，由于這是形參的原因，參數(shù)的名字可以自己定義，但是但是參數(shù)所代表的含義是不會變化的。

2.進(jìn)階版監(jiān)聽：

下面我們改變一下需求：基礎(chǔ)規(guī)則不變，但是因為后臺數(shù)據(jù)庫的更改（畫個圈圈咀咒他）我們需要提交一個這樣的數(shù)據(jù)結(jié)構(gòu)

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

由于我們監(jiān)聽的是對象info中的屬性age值的變化，所以我們需要使用到的是深度監(jiān)聽，具體代碼如下：

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

<script>
export default {
 data() {
  return {
   info: {
    age: ""
   },
   infoMsg: ""
  };
 },
 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 = "你已經(jīng)是個少年";
    } else {
     that.infoMsg = "你已經(jīng)長大了";
    }
   },
   deep: true
  }
 }
};
</script>

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

3.最高級監(jiān)聽：

針對第二個案例不知道你有沒有發(fā)現(xiàn)一個問題：我們監(jiān)聽的是一個對象里面某個屬性的變化，但是如果當(dāng)這個對象里面有很多個值的時候，雖然也可以使用第二種方法進(jìn)行監(jiān)聽，但是這將會是對資源的一種極大的浪費，身為一個嚴(yán)謹(jǐn)?shù)某绦騿T（微笑臉），絕對不能允許這樣的事情發(fā)生，所以我們可以結(jié)合computed（計算屬性）對上面的代碼進(jìn)行優(yōu)化：

<template>
 <div id="app">
  年齡：<input type="number" v-model="info.age"><br>
  提示信息：<span>{{infoMsg}}</span>
 </div>
</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 = "你已經(jīng)是個少年";
    } else {
     that.infoMsg = "你已經(jīng)長大了";
    }
   },
   deep: true
  }
 }
};
</script>

通過上面的我們看出，這次我們監(jiān)聽的是計算屬性ageval，而計算屬性返回的則是info對象中age的值，與第二次的代碼進(jìn)行比較我們可以發(fā)現(xiàn)兩次代碼中監(jiān)聽的一個是對象info，一個是info對象中age的值，性能大大增強，這就是我們期待的結(jié)果了。

總結(jié)

以上所述是小編給大家介紹的vue2.0監(jiān)聽屬性的使用心得及搭配計算屬性的使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: