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

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

2. 常規(guī)用法

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

<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)聽對(duì)象和route變化

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

<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)聽對(duì)象類型，需要開啟深度監(jiān)聽
    ccc: {
      handler: (newValue, oldValue) {
        console.log('舊值：', oldValue)
        console.log('新值：', newValue)
      },
      deep: true
    },
    // 監(jiān)聽對(duì)象里的某個(gè)值
    '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. 即時(shí)表單驗(yàn)證
2. 搜索
3. 監(jiān)聽數(shù)據(jù)變化，做出相應(yīng)改變
4. …

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

<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 的高級(jí)用法

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

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

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

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

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

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

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

注意：深度監(jiān)聽會(huì)帶來一些性能開銷，因?yàn)樗枰f歸遍歷對(duì)象或數(shù)組的所有屬性或元素。因此，只在需要深度監(jiān)聽的情況下使用，以避免不必要的開銷。

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

最新評(píng)論