色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue $watch監聽函數

謝彥文1年前9瀏覽0評論

$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 的使用方法。