VUE watch監聽器的基本使用方法詳解

Posted on by

偵聽器一般來說是用來監聽數據的變化，默認是在數據發生變化時執行。

監聽的數據名放到這裡面作為函數名，這個函數裡面有兩個參數，一個是新值，一個是舊值。

在vue中，使用watch來響應數據的變化，關於watch的用法大致有三種。

1、下面代碼是watch的一種簡單的用法

<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即為你想監聽的數據的名稱，要監聽誰函數名就用誰的 如監聽v-model的firstName                    
//newVal：表示改變後的值，即第一個形參，不要調換位置
//oldVal：表示改變前的值，
            console.log({newVal,oldVal});   //  {newVal: "陳", oldVal: "張"}
        }
        //直接寫一個監聽處理函數，當每次監聽到cityName值發生改變時，執行函數。
        //也可以在所監聽的數據後面直接加字符串形式的方法名：firstName: 'nameChange'
    },
    methods:{
        nameChange(){
         }
    }
})
 vm.firstName = "陳"；//改變監聽的值
</script>

2、immediate 立即監聽

使用watch基本用法時有一個特點，就是當值第一次綁定的時候，不會執行監聽函數，隻有值發生改變才會執行。如果我們需要在最初綁定值的時候也執行函數，則就需要用到immediate屬性。

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

監聽的數據後面寫成對象形式，包含handler方法和immediate，上面簡單的寫法我們寫的函數其實就是在寫這個handler方法、默認省略而已。

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時則立即觸發回調函數；如果為false，則和上面的例子一樣，不會立即執行回調。
            immediate: true
          }
      }
 })
</script>
//handler方法就是你watch中需要具體執行的方法

4、 deep屬性

對於對象或者對象中的屬性，我們如何監聽？那麼就介紹deep屬性。它的作用就是解決這個問題的關鍵。

 <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中就不會執行，隻執行第一次，輸出結果為undefined

默認情況下 handler 隻監聽obj這個屬性它的引用的變化，我們隻有給obj賦值的時候它才會監聽到。

這個時候就可以使用deep深入觀察，監聽器會一層層的往下遍歷，給對象的所有屬性都加上這個監聽器，但是這樣消耗過大。

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容！

推薦閱讀：