看下去

它的中文名稱是：偵聽器（ 大部分繁中寫監聽器 ），但我覺得英文的翻譯字義挺好的，就是“看”，直接明瞭。

範例

首先將它放到跟 data(){}, methods:{}, computed:{} 同一個層級，以 “,” 區隔如下撰寫：

watch:{
  //預計寫 code 的地方
}

接著找出先前示範的 template 片段來做範例：

 <p>The music quotes number: {{ musicQuotes }}</p>

採用 musicQuotes 來進行課程範例中的 watch —— 在課程中所示範的是先顯示預設值 1，如果發生增加或減少的事件（ 瀏覽器“看到/偵聽到/監聽到” 這件事了 ），則過 3 秒會跳到新設定的 20 這個值（ 這數字隨便打的，不用太在意，希望各位能體會我在描述什麼 ）。

因此，期待鍵入下列的內容能實現上述的範例（ 注意： 3 * 1000 這個寫法是因為我每次都把秒數打錯，所以同事建議用這種寫法來換算，請同情這悲慘的數字能力 ）。

  watch: {
    musicQuotes(newVal, oldVal) {
      setTimeout(() => {
        this.musicQuotes = 20
      }, 3 * 1000)
    }
  }

儲存並重新整理瀏覽器後，可以先觀察到 “敵不動，我不動” 的狀態。

也就是當 musicQuotes 的 “值” 並沒有發生任何 “動作/事件” 時，一切都保持原來的樣子（ 非常好！ ）。

接著按下增加鈕以 “觸發事件” （ 改變 musicQuotes 的值 ）。

如上圖，瀏覽器 “看” 到 “事件發生”（ 值改變了 ），換句話說就是偵聽、監聽到了這件事。

於是過了三秒，瀏覽器會自動把值改成前面所設定的 20 這個值。

結論及感想

回到文章最初的想法，英文翻譯的字義的確是比較有那個味道，瀏覽器 “看” 到了，所以做出了相對的回應（ 好吧，可能我中文造詣也不好，白話比較能懂 ）。

比較有趣的是我發現無論增減，值都無法超出 20 這個數值，難道它侷限住一個絕對領域？讓值無法大於或小於 20, -20 這個值？

抱著隨時都要質疑的心想到可能是 3 秒這個設定太短，所以設定到 10 秒。

然後我得到真相＝＝！

對，就是 3 秒惹的禍！

所以使用這個功能（ 秒數 ）做測試範例時，建議要注意一下。

當然不免俗的也翻了一下其他前輩的文章，在此推薦，希望我的說明無誤，若有謬誤歡迎糾正，感恩。

Vue.js: Watch

認識 watch 監聽器