vue監(jiān)聽屬性watch的用法及使用場景詳解

更新時間：2025年09月25日 11:39:28 作者：沖浪的鵬多多

watch是vue中常用的監(jiān)聽器,它主要用于偵聽數據的變化,在數據發(fā)生變化的時候執(zhí)行一些操作,這篇文章主要介紹了vue監(jiān)聽屬性watch的用法及使用場景的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1. 監(jiān)聽屬性 watch

watch 是一個對象，鍵是需要觀察的表達式，用于觀察 Vue 實例上的一個表達式或者一個函數計算結果的變化。回調函數的參數是新值和舊值。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個 property。

2. 常規(guī)用法

watch 監(jiān)聽有兩個形參，第一個是新值，第二個是舊值。如下例子：使用 watch 監(jiān)聽了 total 的值，當 total 的值改變時，控制臺會打印出舊值和新值。

<template>
  <div class="home_box">
    <h1>{{ total }}</h1>
    <button @click="handleAddTotal">增加</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  watch: {
    total(newValue, oldValue) {
      console.log('舊值：', oldValue)
      console.log('新值：', newValue)
    }
  },
  data() {
    return {
      total: 0
    }
  },
  methods: {
    handleAddTotal() {
      this.total++
    }
  }
}
</script>

3. 監(jiān)聽對象和route變化

watch監(jiān)聽的目標，可以是基本類型，也可以是對象，也可以是對象里的一個值。而監(jiān)聽目標的屬性，可以是一個函數，也可以是一個包含handler（回調函數），immediate（是否初始化后立即執(zhí)行一次）和deep（是否開啟深度監(jiān)聽）的對象。

<script>
export default {
  name: 'Home',
  watch: {
    // 監(jiān)聽基本類型
    aaa(newValue, oldValue) {
      console.log('舊值：', oldValue)
      console.log('新值：', newValue)
    },
    // 監(jiān)聽基本類型，并且回調函數寫在methods里，且初始化加載立即執(zhí)行一次
    bbb: {
      handler: 'handleBBB',
      immediate: true
    },
    // 監(jiān)聽對象類型，需要開啟深度監(jiān)聽
    ccc: {
      handler: (newValue, oldValue) {
        console.log('舊值：', oldValue)
        console.log('新值：', newValue)
      },
      deep: true
    },
    // 監(jiān)聽對象里的某個值
    'ddd.d2.d21': {
      handler: (newValue, oldValue) {
        console.log('舊值：', oldValue)
        console.log('新值：', newValue)
      }
    },
    // 監(jiān)聽route變化
    '$route': {
      handler: (newValue, oldValue) {
        console.log('舊值：', oldValue)
        console.log('新值：', newValue)
      }
    }
  },
  data() {
    return {
      aaa: 0,
      bbb: 0,
      ccc: {
        c1: 0,
        c2: 0
      },
      ddd: {
        d1: 0,
        d2: {
          d21: 0
        }
      }
    }
  },
  methods: {
    handleBBB() {
      this.bbb++
    }
  }
}
</script>

4. 使用場景

watch監(jiān)聽屬性使用場景很多。比如：

即時表單驗證
搜索
監(jiān)聽數據變化，做出相應改變
…

如下例子，監(jiān)聽 keyword 的值，實時打印出來。

<template>
  <div class="home_box">
    <input type="text" v-model="keyword">
  </div>
</template>

<script>
export default {
  name: 'Home',
  watch: {
    keyword: {
      handler: 'handleKeywordChange'
    }
  },
  data() {
    return {
      keyword: '',
    }
  },
  methods: {
    handleKeywordChange(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

附Watch 的高級用法

深度監(jiān)聽數據的變化

在 Vue 中，深度監(jiān)聽數據的變化意味著不僅監(jiān)聽對象或數組本身的變化，還監(jiān)聽它們內部屬性或元素的變化。

當將deep選項設置為true時，Vue 會遞歸遍歷對象的所有屬性或數組的所有元素，并為每個屬性或元素都創(chuàng)建一個深度觀察者。這樣，無論是對象的某個屬性還是數組的某個元素發(fā)生變化，都能觸發(fā)相應的回調函數。

使用深度監(jiān)聽來監(jiān)聽對象屬性的變化如下所示：

watch: {
  'obj.foo': {
    handler(newVal, oldVal) {
      console.log('obj.foo屬性發(fā)生變化了，新值為:', newVal, '舊值為:', oldVal);
    },
    deep: true // 深度監(jiān)聽
  }
}

在上述示例中，obj是一個對象，foo是它的一個屬性。當obj或foo發(fā)生變化時，都能觸發(fā)深度觀察者的回調函數。

因此，通過在 Vue 的watch選項中將deep選項設置為true，可以實現對對象屬性或數組元素的深度監(jiān)聽，從而捕捉到它們內部值的變化。

注意：深度監(jiān)聽會帶來一些性能開銷，因為它需要遞歸遍歷對象或數組的所有屬性或元素。因此，只在需要深度監(jiān)聽的情況下使用，以避免不必要的開銷。

還需要特別注意的是，深度監(jiān)聽僅適用于對象和數組，對于基本類型的數據如字符串、數字等是不起作用的。

立即執(zhí)行 Watch 回調函數

在 Vue 中，watch 選項的回調函數默認是在被監(jiān)聽的數據發(fā)生變化后異步執(zhí)行的，即在下一次事件循環(huán)中執(zhí)行。

然而，有時我們可能需要立即響應數據變化，并在變化發(fā)生后立即執(zhí)行回調函數。為了實現這一需求，Vue 提供了immediate選項。

當在 watch 選項中設置immediate: true時，Vue 會在監(jiān)聽開始之初立即執(zhí)行回調函數，無論數據是否已經發(fā)生變化。

使用immediate選項來實現立即執(zhí)行 watch 回調函數的效果如下所示：

watch: {
  foo: {
    handler(newVal, oldVal) {
      console.log('foo屬性發(fā)生變化了，新值為:', newVal, '舊值為:', oldVal);
    },
    immediate: true // 立即執(zhí)行
  }
}

在上述示例中，當 Vue 實例創(chuàng)建時，會立即執(zhí)行一次foo屬性的 watch 回調函數，無論foo的值是否已經發(fā)生變化。隨后，如果foo發(fā)生變化，Vue 會在下一次事件循環(huán)中再次執(zhí)行 watch 回調函數。

總之，通過在 Vue 的 watch 選項中設置immediate: true，可以立即執(zhí)行 watch 回調函數，不等待數據的真正變化。這在某些情況下可以用于立即響應數據變化并執(zhí)行相關操作的需求。