vue中的watch怎么用

2024-06-22 12:26:25 前端筆記 174

Vue.js 中使用 watch

在 Vue.js 中，watch 選項允許開發者監聽特定數據的變化。一旦數據發生變化，watch 就會觸發一個回調函數，該函數可以執行更新視圖或執行其他操作等任務。

使用語法

watch: {
  // 要監聽的數據屬性
  propertyName: {
    // 回調函數
    handler(newValue, oldValue) {
      // 在數據發生更改時運行的代碼
    },

    // 可選：配置項
    immediate: true | false, // 立即執行回調
    deep: true | false // 深度監聽對象或數組
  }
}

使用示例

export default {
  data() {
    return {
      count: 0
    }
  },

  watch: {
    // 監聽 count 屬性
    count: {
      handler(newValue, oldValue) {
        console.log(`count 發生變化：${oldValue} -&gt; ${newValue}`)
      },

      // 立即執行回調
      immediate: true
    }
  }
}

在這個示例中，count 屬性被監聽。當 count 發生變化時，handler 函數會被調用，它會記錄 count 值的變化。由于 immediate 設置為 true，回調函數會在組件首次渲染時立即執行。

配置選項

watch 選項提供了幾個配置選項，用于自定義其行為：

immediate: 指定是否在組件初始化時立即執行回調函數。

deep: 指定是否遞歸監聽對象或數組的更改。如果設置為 true，則數組或對象中的嵌套屬性的變化也會觸發回調函數。

注意：

避免在 watch 回調函數中重新設置同一數據屬性，這會導致陷入無限循環。
如果監聽的對象或數組較大，請考慮使用 deep 選項，以避免性能問題。
如果您只關心初始值，可以使用 created 鉤子函數。