昨天看完了Computed與Methods，今天來看Watch！從名字因該能多少能猜到一點了，它會幫我們監視某個值，如果這個值發生了改變，就去做我們指定的工作，馬上靠一個實例來認識它吧！

Watch範例

我做一個雙向綁定的<input>，判斷資料改變並離開<input>後跳出alert訊息框，如果忘記雙向綁定可以回去看一下( https://ithelp.ithome.com.tw/articles/10201973 )：

<template>
  <div id="app">
    <h1>鐵人30抽獎活動</h1>
    <input type="text" v-model.trim.lazy="myname">
    <p>抽獎人 {{ myname }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myname:'請輸入真實姓名'
      }
    },
    watch: {
      myname() {
        alert('祝您中獎！')
      }
    }
  }
</script>

watch用法跟昨天學的Computed與Methods一樣，直接把函數放入watch裡就行了，相當實用的功能，原本computed無法做到的事，靠它就能補足。

最近工作上剛好也用到watch，主要是讓它幫我監視日期選單，只要使用者改選其它日期，就重新打api抓回該日期的資料，非常簡單好用，相信未來watch也能幫你解決許多問題！

immediate屬性

從剛剛學習的內容，我們知道watch會在目標改變時才開始運算函數，那如果我還另外想要在初始時就執行呢？這時就要用到immediate屬性了！如下範例：

<script>
  data() {
      return {
        myName: '姓名',
        mail: '電子信箱'
      }
  },
  watch: {
    myName: {
      handler {
        alert('請輸入真實姓名')
      },
      immediate: true
    }
  }
</script>

• 我先加入了handler(這是保留字)函數，其實之前範例中watch裡加入的函數名默認就是handler，vue會去運算裡面的內容。
• immediate的預設值為false，所以之前沒寫immediate都會被視為false，而當我加入immediate:true後，wacth裡的myName在初始時就會先去執行handler裡的函數，這樣一來除了改變時會運算函數，初始時也同樣會運算。

deep屬性

watch的deep屬性意思為是否深層監視，因為預設為沒有，所以當你想監視的資料不在同一層時，就要加入deep: true如下範例：

<script>
  data() {
    return {
      myData: {
        myName: 'Adam',
        mail: 'Adam@xxx.com.tw'
      }
    }
  },
  watch: {
    myData: {
      handler {
         alert('完成資料更新')
      },
      deep: true
    }
  }
</script>

從上面範例可以看到，資料存放在(myData)子層內，預設是無法watch到的，這時加入deep: true就能向內找到目標並監視它。

以上就是今天Watch的學習內容。