$watch 是 Vue.js 中一個非常重要的監聽函數,它可以在數據發生變化時執行對應的回調函數。下面我們來詳細了解一下 $watch 的使用方法。
在 Vue 實例中通過 $watch 函數來設置監聽器,從而實現對數據的監控。$watch 函數接受兩個參數:第一個參數是一個數據表達式字符串或者一個函數;第二個參數則是一個回調函數,當監視的值發生變化時,這個回調函數就會被調用。
const vm = new Vue({ data: { count: 0 } }) vm.$watch('count', function (newValue, oldValue) { console.log('count變化了:', newValue, oldValue) })
在上面的代碼中,我們首先創建了一個 Vue 實例,并設置了一個 data 屬性 count,它的值為 0。接著使用 $watch 方法來監聽 count,當 count 發生變化時,就會執行對應的回調函數。
除了監聽對象內的屬性變化以外,$watch 還可以監聽 Vue 實例上自定義的屬性,只需要在定義屬性的時候,設置該屬性的可監聽屬性即可實現對該屬性的監聽。
const vm = new Vue({ data: { count: 0, msg: 'abc' }, watch: { msg: function (newValue, oldValue) { console.log('msg變化了:', newValue, oldValue) } } })
上面的代碼我們定義了一個 Vue 實例,其中除了 count 屬性以外,還有一個 msg 屬性。接著我們在 Vue 實例中使用 watch 屬性來配置對 msg 屬性的監聽,當 msg 屬性發生變化時,就會執行對應的回調函數。
除了普通的同步監聽以外,$watch 還支持異步監聽。比如說,在監聽某個表單數據變化時,我們可以配置一個定時器來延遲執行對應的回調函數,減少不必要的計算。
const vm = new Vue({ data: { count: 0 } }) vm.$watch('count', function (newValue, oldValue) { setTimeout(() =>{ console.log(newValue, oldValue) }, 0) })
上面的代碼中,我們在 $watch 的回調函數中使用了 setTimeout 來模擬一個異步監聽,當 count 變化時,就會延時執行對應的回調函數。
總的來說,$watch 在 Vue.js 中非常重要,它可以幫助我們實現對數據的監測以及響應式更新。如果你是一個 Vue.js 開發者,建議你務必要掌握 $watch 的使用方法。