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

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

2. 常規(guī)用法

watch 監(jiān)聽有兩個形參，第一個是新值，第二個是舊值。如下例子：使用 watch 監(jiān)聽了 total 的值，當(dāng) 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)聽的目標(biāo)，可以是基本類型，也可以是對象，也可以是對象里的一個值。而監(jiān)聽目標(biāo)的屬性，可以是一個函數(shù)，也可以是一個包含handler（回調(diào)函數(shù)），immediate（是否初始化后立即執(zhí)行一次）和deep（是否開啟深度監(jiān)聽）的對象。

<script>
export default {
  name: 'Home',
  watch: {
    // 監(jiān)聽基本類型
    aaa(newValue, oldValue) {
      console.log('舊值：', oldValue)
      console.log('新值：', newValue)
    },
    // 監(jiān)聽基本類型，并且回調(diào)函數(shù)寫在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)聽屬性使用場景很多。比如：

1. 即時表單驗證
2. 搜索
3. 監(jiān)聽數(shù)據(jù)變化，做出相應(yīng)改變
4. …

如下例子，監(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)聽數(shù)據(jù)的變化

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

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

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

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

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

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

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

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

立即執(zhí)行 Watch 回調(diào)函數(shù)

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

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

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

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

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

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

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

注意：當(dāng)設(shè)置immediate: true時，回調(diào)函數(shù)會在監(jiān)聽開始時立即執(zhí)行一次，并且不會等待偵聽的數(shù)據(jù)屬性的真正變化。這意味著你可能無法獲得先前的值，因為此時回調(diào)函數(shù)仍然是在數(shù)據(jù)變化之前執(zhí)行的。

總結(jié)

到此這篇關(guān)于vue監(jiān)聽屬性watch的用法及使用場景的文章就介紹到這了,更多相關(guān)vue監(jiān)聽屬性watch內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論