Vue中的監聽(Watch)是指當Vue實例data中的某些屬性值發生變化時,自動執行某些操作的功能。監聽使得開發者可以十分方便地對數據變化做出響應,從而改變頁面中的展示。
監聽的基本用法如下:
watch: { // 監聽obj屬性變化 obj: function (newVal, oldVal) { console.log('obj變化了:', newVal, oldVal) }, // 監聽array屬性變化,deep選項表示遞歸監聽 'array': { handler: function (newVal, oldVal) { console.log('array變化了:', newVal, oldVal) }, deep: true } }
上面的代碼中,watch屬性為一個對象,對象中的每一個屬性都是要監聽的數據屬性名稱,即數據變化時觸發的函數。在監聽函數中,第一個參數是新值,第二個參數是舊值。
除了監聽對象的屬性變化外,Vue還支持監聽對象內部某個屬性的變化。例如:
watch: { // 監聽obj的name屬性變化 'obj.name': function (newVal, oldVal) { console.log('obj.name變化了:', newVal, oldVal) } }
對象和數組的監聽有些不同,可以通過deep選項來設置遞歸監聽。例如上述代碼中,對于array數組的監聽就使用了deep選項,表示遞歸監聽數組內部元素的變化。
在Vue中,也可以使用$watch方法來動態添加和刪除監聽函數。例如:
// 監聽obj屬性的變化 var unwatch = vm.$watch('obj', function (newVal, oldVal) { console.log('obj變化了:', newVal, oldVal) }) // 取消監聽 unwatch()
在代碼中,vm代表Vue實例對象。$watch方法返回一個函數,調用該函數可以取消對屬性的監聽。
總之,Vue提供了靈活的監聽功能,使得開發者可以輕松實現數據的響應式。如果你想進一步了解Vue的監聽,可以參考Vue的官方文檔。