本篇為《認識 Vue.js watch 監聽器》的摘要，請查看原文章。

Vue 可使用 watch 觀測資料，在資料變化時做一些應對。

用法也很直覺：

data() {
    return {
        test: 0
    }
}
watch: {
    test: function(old, new) { // watch data, computed
        console.log('changed')
    },
    '$store.state.id'(val) {  // watch object.key
        this.doSomething(val)
    }
}

---

options

watch: {
    test: {
        handler: function() {
            console.log('changed')
        }
        deep: true,
        immediate: true
    }
}

• deep
  當欲觀察值的特性為 call by reference，例如 Object 時，需將 deep 值設定為 true，告知 watch 需要深度觀察。否則會因為特性關係，無法觸發監聽器。
• immediate
  監聽器預設為當值有所變化時才會觸發。如果我們希望在初始化完成後，就先觸發，執行 handler，就可以將 immediate 值設為 true。