Watch可以顧名思義的推知，它是關注一個值得變化，當一旦變化，變執行該函數。

watch: {
    data: function(newValue, oldValue) {
        console.log('data changed', newValue, oldValu)
    }
}

如果你不需要任何其他設定，那麼直接在 value 的部分寫入 Function 即可。其中 function 有兩個參數值，分別為改變後的值，及改變前的值。

如果想要額外管理或是複用 function，可以把 function 寫進 methods 管理。

watch: {
    data: "dataHandler"
},
methods: {
    dataHandler (newValue, oldValue) {
        console.log('data changed', newValue, oldValu)
    }
}

上述的 Function，官網文件皆建議不要使用 Arrow function 來撰寫，因為 Arrow function 的 this 是在 function 被呼叫時綁定的，可能不會按照期望的指向 Vue 實例。

再來談到 watch 的設定:

watch: {
    dataObject: {
        handler: function(newValue, oldValue) {
            console.log('data changed', newValue, oldValu)
        },
        deep: true,
        immediate: true
    }
}

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

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang