什么是 Vue.js 中的 watch？

Vue.js 中的 watch 是一個響應(yīng)式特性，允許你監(jiān)聽數(shù)據(jù)屬性的變化并對它們做出反應(yīng)。當被監(jiān)視的屬性值發(fā)生變化時，watch 表達式將重新執(zhí)行，從而運行關(guān)聯(lián)的函數(shù)或執(zhí)行指定的動作。

如何使用 watch？

要使用 watch，你需要在組件的 options 對象中提供一個 watch 對象：

export default {
  watch: {
    // 監(jiān)視的屬性及其關(guān)聯(lián)函數(shù)
  }
}

watch 對象的鍵是待監(jiān)視的屬性，值是當該屬性更改時要執(zhí)行的函數(shù)。此函數(shù)將接收兩個參數(shù)：

newValue：屬性的新值

oldValue：屬性的舊值

watch 的好處

使用 watch 可以帶來許多好處，包括：

自動跟蹤數(shù)據(jù)更改，無需手動檢查
響應(yīng) UI 狀態(tài)的變化，以保持數(shù)據(jù)和視圖同步
實現(xiàn)可重用的、響應(yīng)式的組件
方便地處理異步操作

示例

以下示例展示了如何使用 watch 監(jiān)聽 count 屬性的變化，并在其更新后打印一條消息：

export default {
  watch: {
    count: {
      handler(newValue, oldValue) {
        console.log(`count changed from ${oldValue} to ${newValue}`)
      }
    }
  }
}