HI！大家好啊！緊接著computed之後，今天再來學習新的Vue.js的屬性watch吧！

watch

這是什麼？

如果我們要在一個表單上的值發生改變的時候，去執行某些事件，例如判斷輸入資料的格式正不正確，第一個想到的應該是以下的做法：
HTML

<div id="nameVue">
    <input id="name" v-model="name" @change="checkName" />
  <span style="color:red">{{alertMessage}}</sapn>
</div>

JavaScript

//資料
let nameData = {
    name : 'Tom Cruise',
    alertMessage : '',
}

//方法
let nameMethod = {
    //檢查姓名格式
    checkName : () => {
        let newName = document.getElementById('name').value
        if(newName.trim().indexOf(' ') == -1){
            nameData.alertMessage = '請輸入正確的姓名格式'
        }
        else
            nameData.alertMessage = ''
    }
}

let nameVue = new Vue({
    el:'#nameVue',
    data:nameData,
    methods:nameMethod,
})

我們可以透過v-on來處理onchange事件，達到我們要的成果：

但是如果我們使用onchange事件的話，就必須在移除焦點時才會觸發相對應的事件，那有辦法在值改變的時候就馬上知道嗎？

欸嘿嘿！有的！接著讓我們把watch給請出來吧！

watch的基本用法

基本上watch能夠在某個監聽值發生改變的時候進行異步的響應，有點類似JavaScript上的監聽器addEventListener()，不過他是對物件內的值做監聽，來看看使用方法吧！
HTML

<div id="nameVue">
    <input id="name" v-model="name"/>
    <span style="color:red">{{alertMessage}}</sapn>
</div>

JavaScript

//資料
let nameData = {
    name : 'Tom Cruise',
    alertMessage : '',
}

//方法
let nameMethod = {
    //檢查姓名格式
    checkName : (newName,oldName) => {
        if(newName.trim().indexOf(' ') == -1)
            nameData.alertMessage = '請輸入正確的姓名格式'
        else
            nameData.alertMessage = ''
    }
}

let nameVue = new Vue({
    el:'#nameVue',
    data:nameData,
    watch:{
        /*對name值進行監聽，只要name改變了，就會觸發程式
        newVal為更改後的值，oldVal更改前的值*/
        name: (newVal,oldVal) => {
            //呼叫nameMethod的function
            nameMethod.checkName(newVal)
        }
    }
})

上方例子中，我們原本綁定在input的@change拿掉，並在Vue的物件中增加了一個新的物件屬性watch，watch中的name屬性即是要進行監聽的屬性，並在屬性值改變時執行function，另外可以發現，在執行的function中有兩個參數newVal和oldVal，這兩個參數是Vue幫忙處理的，第一個參數傳入更改過後的值，第二個為更改前的值，經過以上方式，即使在輸入中也可以捕捉每一次和前一次變動的內容，以及變動時要使用的函式，便不需要在離開焦點才能執行function看到結果，如下：

補充說明(感謝fysh711426大大補充)

watch的運作主要是因為v-model幫我們做了兩件事情

1. 使用v-bind單向綁定資料，會因為每次綁定值的變動同步更新到View上。
2. 使用v-on:input去偵測每次值的變動，觸發更新v-bind綁定的值。

參考文章：https://blog.csdn.net/u010320804/article/details/79486034
以上補充也會同步更新到[筆記][Vue.js]打開Vue.js世界的大門(4)-讓雙向綁定抓住你的資料

而watch的原理是因為v-model幫我們做了v-on:input的關係，這會導致我們每次的更新資料的時候，都重新把新值透過存取器的setter寫到綁定的屬性中，主角watch就會在這個時候藉由setter觸發，執行watch中綁定的事件，執行完後後再用getter把值重新綁定到畫面！

參考文章：https://segmentfault.com/a/1190000010014281

話說，官方在說明watch的例子時真的很簡單就帶過了，感覺對他有點偏心XD，不過以上表單驗證的例子也是我目前想的到watch在實務上可以用到的地方，其他可能要等到某天預到什麼需求，才會想起「對了！我可以用watch處理！」這樣子吧XD，如果有大大在實務上watch應用的地方也歡迎留言分享！

最後這篇短短的watch屬性應該不難懂（結果我也偏心給他最少的章節XD）！如果文章中有任何解釋錯誤、講解不清楚的地方，在請各位大大留言告訴我，我會盡快修改文章內容的！謝謝大家的觀賞