watch 是一個響應式特性,允許你監聽 vue.js 中數據屬性的變化并作出反應,從而自動跟蹤數據更改,保持數據和視圖同步。watch 對象的鍵是待監視的屬性,值是屬性更改時要執行的函數,該函數將接收新舊值作為參數。
什么是 Vue.js 中的 watch?
Vue.js 中的 watch 是一個響應式特性,允許你監聽數據屬性的變化并對它們做出反應。當被監視的屬性值發生變化時,watch 表達式將重新執行,從而運行關聯的函數或執行指定的動作。
如何使用 watch?
要使用 watch,你需要在組件的 options 對象中提供一個 watch 對象:
export default { watch: { // 監視的屬性及其關聯函數 } }
登錄后復制
watch 對象的鍵是待監視的屬性,值是當該屬性更改時要執行的函數。此函數將接收兩個參數:
newValue:屬性的新值
oldValue:屬性的舊值
watch 的好處
使用 watch 可以帶來許多好處,包括:
自動跟蹤數據更改,無需手動檢查
響應 UI 狀態的變化,以保持數據和視圖同步
實現可重用的、響應式的組件
方便地處理異步操作
示例
以下示例展示了如何使用 watch 監聽 count 屬性的變化,并在其更新后打印一條消息:
export default { watch: { count: { handler(newValue, oldValue) { console.log(`count changed from ${oldValue} to ${newValue}`) } } } }
登錄后復制