Vue 的watch 提供了deep、immediate 和flush 三個高級選項來增強監(jiān)聽能力。 1. deep: true 可監(jiān)聽對像或數(shù)組內(nèi)部變化，適用於需追蹤屬性變更的場景，但會帶來性能開銷；2. immediate: true 可在初始化時立即執(zhí)行一次回調(diào)，適合依賴初始值進行處理的情況；3. flush 控制回調(diào)觸發(fā)時機，'pre' 在渲染前執(zhí)行，'post' 在渲染後執(zhí)行，默認(rèn)為'post'，用於訪問更新後的DOM 或提前處理數(shù)據(jù)。合理使用這些選項可提升代碼效率與邏輯清晰度。

Vue 的watch是一個非常實用的工具，用來觀察響應(yīng)式數(shù)據(jù)的變化並做出相應(yīng)處理。但在實際開發(fā)中，僅用基礎(chǔ)的watch可能會遇到一些限制，比如無法監(jiān)聽對象內(nèi)部變化、希望在初始化時就觸發(fā)一次回調(diào)等。

這時候就需要用到Vue 提供的幾個高級選項： deep 、 immediate和flush 。下面我們就來聊聊這幾個參數(shù)的作用和使用場景。

1. deep: true —— 監(jiān)聽對像或數(shù)組的深層變化

當(dāng)你想監(jiān)聽一個對像或者數(shù)組的變化時，普通的watch只會在整個對像被替換時才會觸發(fā)，而不會對對象內(nèi)部屬性的變化做出反應(yīng)。

舉個例子：

 data() {
  return {
    user: {
      name: 'Tom',
      age: 25
    }
  }
}

如果你只寫：

 watch: {
  user(newVal, oldVal) {
    console.log('user changed');
  }
}

那隻有當(dāng)整個user對像被替換成另一個對象時才會觸發(fā)。如果你想監(jiān)聽user.name或user.age的變化，就需要加上deep: true ：

 watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('user object or its properties changed');
    },
    deep: true
  }
}

這樣無論對象裡的哪個屬性變了，都會觸發(fā)回調(diào)。

?? 注意：開啟deep會帶來一定的性能開銷，特別是當(dāng)對像很大或者結(jié)構(gòu)很複雜時，所以建議按需使用。

2. immediate: true —— 初始化時立刻執(zhí)行一次回調(diào)

有時候你希望在組件創(chuàng)建的時候， watch的回調(diào)函數(shù)就能立即執(zhí)行一次。比如你想根據(jù)初始值做一些邏輯處理，而不是等它發(fā)生變化之後才觸發(fā)。

例如：

 watch: {
  searchQuery: {
    handler(newVal) {
      console.log('Searching for:', newVal);
    },
    immediate: true
  }
}

在這個例子裡，組件一加載就會執(zhí)行一次handler ，傳入的是當(dāng)前的searchQuery值。

這種方式非常適合用於初始化依賴某個響應(yīng)式變量的操作。

3. flush: 'pre' | 'post' —— 控制回調(diào)觸發(fā)時機

Vue 的響應(yīng)式系統(tǒng)是異步更新的，也就是說，當(dāng)你修改了響應(yīng)式數(shù)據(jù)，DOM 更新並不是立即發(fā)生的，而是“排隊”處理。

默認(rèn)情況下， watch的回調(diào)是在“隊列”處理完成後（也就是DOM 更新後）執(zhí)行的。但你可以通過flush來改變這個行為：

• 'pre' ：回調(diào)會在渲染之前執(zhí)行
• 'post' ：回調(diào)會在渲染之後執(zhí)行（這是默認(rèn)值）

適用場景舉例：

• 如果你在watch中要訪問更新後的DOM 元素，那就應(yīng)該設(shè)置為'post'
• 如果你不希望等待DOM 更新，想要盡快處理數(shù)據(jù)，可以設(shè)為'pre'

示例：

 watch: {
  selectedId: {
    handler(newId) {
      this.fetchDetails(newId);
    },
    flush: 'post'
  }
}

這樣可以確保在獲取詳情前，相關(guān)的DOM 已經(jīng)更新完畢。

小結(jié)一下幾個關(guān)鍵點：

• 使用deep: true來監(jiān)聽對象/數(shù)組的內(nèi)部變化
• 使用immediate: true在初始化時立刻執(zhí)行一次回調(diào)
• 使用flush控制回調(diào)在渲染前還是渲染後執(zhí)行
• 每個選項都有適用場景，不要盲目堆疊使用，避免不必要的性能損耗

基本上就這些了。這些選項雖然看起來簡單，但在實際項目裡用好了，能讓代碼更簡潔、邏輯更清晰。

以上是高級VUE觀察者選項：深，直接，齊平的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！