快捷導(dǎo)航

VUE watch監(jiān)聽(tīng)器的基本使用方法詳解

更新時(shí)間：2021年10月20日 15:37:52 作者：JingG459

這篇文章主要介紹了vue使用watch監(jiān)聽(tīng)器的基本使用方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

偵聽(tīng)器一般來(lái)說(shuō)是用來(lái)監(jiān)聽(tīng)數(shù)據(jù)的變化，默認(rèn)是在數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行。

監(jiān)聽(tīng)的數(shù)據(jù)名放到這里面作為函數(shù)名，這個(gè)函數(shù)里面有兩個(gè)參數(shù)，一個(gè)是新值，一個(gè)是舊值。

在vue中，使用watch來(lái)響應(yīng)數(shù)據(jù)的變化，關(guān)于watch的用法大致有三種。

1、下面代碼是watch的一種簡(jiǎn)單的用法

<div id="app">
    <input type="text" v-model="firstName" />
</div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
var vm=new Vue({
    el:"#app",
    data:{
        firstName:"張"
    },
    watch:{         
        firstName：(newVal,oldVal){
//firstName即為你想監(jiān)聽(tīng)的數(shù)據(jù)的名稱，要監(jiān)聽(tīng)誰(shuí)函數(shù)名就用誰(shuí)的 如監(jiān)聽(tīng)v-model的firstName                    
//newVal：表示改變后的值，即第一個(gè)形參，不要調(diào)換位置
//oldVal：表示改變前的值，
            console.log({newVal,oldVal});   //  {newVal: "陳", oldVal: "張"}
        }
        //直接寫(xiě)一個(gè)監(jiān)聽(tīng)處理函數(shù)，當(dāng)每次監(jiān)聽(tīng)到cityName值發(fā)生改變時(shí)，執(zhí)行函數(shù)。
        //也可以在所監(jiān)聽(tīng)的數(shù)據(jù)后面直接加字符串形式的方法名：firstName: 'nameChange'
    },
    methods:{
        nameChange(){
         }
    }
})
 vm.firstName = "陳"；//改變監(jiān)聽(tīng)的值
</script>

2、immediate 立即監(jiān)聽(tīng)

使用watch基本用法時(shí)有一個(gè)特點(diǎn)，就是當(dāng)值第一次綁定的時(shí)候，不會(huì)執(zhí)行監(jiān)聽(tīng)函數(shù)，只有值發(fā)生改變才會(huì)執(zhí)行。如果我們需要在最初綁定值的時(shí)候也執(zhí)行函數(shù)，則就需要用到immediate屬性。

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    { immediate: true }
  }
}

監(jiān)聽(tīng)的數(shù)據(jù)后面寫(xiě)成對(duì)象形式，包含handler方法和immediate，上面簡(jiǎn)單的寫(xiě)法我們寫(xiě)的函數(shù)其實(shí)就是在寫(xiě)這個(gè)handler方法、默認(rèn)省略而已。

3、handler方法

<div id="app">
    <div>
        <p>Number: {{ myNumber }}</p>
        <p>Number: <input type="text" v-model.number="myNumber"></p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        myNumber: 'Dawei'
    },
    watch: {
        myNumber: {
            handler(newVal, oldVal) {
                console.log('newVal', newVal);
                console.log('oldVal', oldVal);
            },
            //immediate為true時(shí)則立即觸發(fā)回調(diào)函數(shù)；如果為false，則和上面的例子一樣，不會(huì)立即執(zhí)行回調(diào)。
            immediate: true
          }
      }
 })
</script>
//handler方法就是你watch中需要具體執(zhí)行的方法

4、 deep屬性

對(duì)于對(duì)象或者對(duì)象中的屬性，我們?nèi)绾伪O(jiān)聽(tīng)？那么就介紹deep屬性。它的作用就是解決這個(gè)問(wèn)題的關(guān)鍵。

 <div id="root">
    <p>obj.a: {{obj.a}}</p>
    <p>obj.a: <input type="text" v-model="obj.a"></p>
</div> 
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
    new Vue({
        el: '#root',
        data: {
            obj: {
                 a: 123
            }
        },
        watch: {
            obj: {
            handler(newName, oldName) {
                console.log(newName, oldName);
            },
            immediate: true,
            deep:true
            }
        } 
})
</script>

上面的代碼如果不加deep:true 那么console中就不會(huì)執(zhí)行，只執(zhí)行第一次，輸出結(jié)果為undefined

默認(rèn)情況下 handler 只監(jiān)聽(tīng)obj這個(gè)屬性它的引用的變化，我們只有給obj賦值的時(shí)候它才會(huì)監(jiān)聽(tīng)到。

這個(gè)時(shí)候就可以使用deep深入觀察，監(jiān)聽(tīng)器會(huì)一層層的往下遍歷，給對(duì)象的所有屬性都加上這個(gè)監(jiān)聽(tīng)器，但是這樣消耗過(guò)大。