雖然之前提過的 計算屬性 computed，就有監聽的功能了，不過有時候我們仍需要一個屬於自己定義的監聽器，這時就可以使用到 watch 這個更通用的方法了~
點我複習 computed

watch 用法

var app = new Vue({
    el: '#app',
    data: {
        question: ''
    },
    watch:{
        // 把要觀察的變數名稱直接拿來使用
        question(){
            // 變動時要做的事 ...
        }
        
        // 也可以寫成這樣，可以依照需求
        question(newData, oldData){
            // 變動時要做的事 ...
            
            // watch 提供了兩個參數可以使用
            // newData : 變更前的資料
            // oldData : 變更後的資料
        }
    },
    methods: {
    }
})

watch 的使用會是將我們想要監聽的變數，在 watch 當成 function 來使用，所以當範例中 question 的值被改變，就會自動執行 watch 我們定義變動時要做的事

物件的監聽

除了簡單的變數之外，物件、computed計算後的回傳值 或是陣列...等，也是可以監聽，先來看看物件監聽的寫法

data:{
    member:{
        id:1,
        nickName:"Jerry"
    }
},
watch : {
    // 記得使用引號括起來
    'member.nickName' : function() {
        // do something ...
    }
}

深層監聽

如果是陣列的話，一開始我們可能會只是個空陣列，等到我們接到值，才往裡面丟資料，這時候就會用到深層監聽的方式來監控陣列內內容的變化

data:{
    todos:[]
},
watch : {
    todos:{
        deep: true,
        handler() {
            // do something ...
        }
    }
}

深層的寫法會比較不同，要記得加上 deep: true 來告知使用深層監聽而非淺層監聽

watch 的其他使用

對於 watch 的使用還有一些其他的使用方式跟介紹，像是 也可用來監聽路由變化、Vue 實體初始化時叫用監聽器、監聽器的註銷 ...等等，這邊就沒有多做介紹，有興趣的可以再找找~

參考資料

Vue 官方文件
勇者鬥 Vue 龍 監聽器( watch )
博客园(颠覆者) Vue.js中 watch(深度监听)的最易懂的解释