Vue 中 Watcher 的作用

在 Vue 中，Watcher 是一個用來觀察數據變化并執行相應操作的對象。當被觀察的數據發生變化時，Watcher 會觸發相應的回調函數。

Watcher 的作用

Watcher 主要用于以下場景：

偵聽數據變化：當數據發生變化時，Watcher 會自動觸發，執行回調函數中的操作。

觸發 UI 更新：當數據變化后需要更新 UI 時，可以通過 Watcher 來觸發 Vue 的響應式更新機制。

異步數據操作：當需要對異步獲取的數據進行操作時，可以使用 Watcher 來等待數據返回并觸發回調函數。

實現自定義邏輯：通過定義自定義 Watcher，可以實現更復雜的業務邏輯，例如條件判斷、數據驗證等。

Watcher 的使用

在 Vue 中，可以使用 選項來定義 Watcher，格式如下：

<code class="js">watch: {
  // 被觀察的數據
  propertyName: {
    // 數據發生變化時觸發的回調函數
    handler(newValue, oldValue) {
      // 要執行的操作
    },
    // 是否立即執行回調函數（默認 false）
    immediate: true,
  },
}</code>

示例

以下是一個簡單示例，演示如何使用 Watcher 來更新 UI：

<code class="js">const App = {
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`計數從 ${oldValue} 變為 ${newValue}`);
    },
  },
  template: `<p>計數：{{ count }}</p>`,
};</code>

在這個示例中，當 數據發生變化時，Watcher 會觸發回調函數，并打印出數據變化的信息。