目前的話使用的是 Options API 的寫法，watch 是一個蠻好用的監聽器，他不僅可以監聽 data、computed 的資料，也可以監聽 vue-router 的 url 等等，現在先來介紹一下他的基本應用：
他的基本結構：
watch: {
要監聽的目標() {
// 處理方法
}
}
基本範例：
export default {
data() {
return {
text: ''
}
},
watch: {
text(newValue, oldValue) {
if (newValue.length >= 10) {
console.log(newValue)
}
}
}
}
這段的內容是 定義一個名為 text 的資料，當 text 的長度超過 10 字元的時候就將他打印出來。在 watch 裡面可以看到代入了 newValue 和 oldValue 兩個參數，他可以分開來監控該變數發生變化時的新值和舊值，以此可以用來寫不同要使用到的邏輯。
當然，如果不代參數的話也是可以的，那就是只能接收到目前最新的值，要怎麼監控主要還是要看你現在寫的專案要用到哪一種的邏輯。
如果今天你要監聽的資料是 物件(Object) 的話要怎麼辦呢？用上面的基本監聽沒辦法成功獲得想要的值。
那是因為他指向的地址是同一地址，watch 覺得你選的值沒有變化，解決的方法有兩種：
我們想假定一個資料，下面的話都使用這個資料
data () {
return {
product: {
name: '產品',
price: 30
}
}
}
方法一：直接監聽你要變化的值
watch: {
'product.name'(newValue, oldValue) {
console.log(newValue, oldValue)
}
}
但是這又有一個問題，我們要用的資料是 物件(Object)，代表了我要使用裡面的全部資料，難道要我把每一個值都寫一遍嗎？
這個倒是不用，讓我們來進入深度監聽的方法
方法二：深度監聽
注意：深度監聽的前提是監聽的目標是一個 物件(Object)
watch: {
product: {
handler(newValue, oldValue) {
console.log(newValue, oldValue)
},
deep: true
}
}
深度監聽的話會把原本監聽的對象從函式格式轉成物件格式，同時加上 handler 和 deep 來開啟深度監聽
handler: 控制器
deep: 確認是不是屬於 深層監聽
這個時候你會發現深度監聽裡面的新值和舊值內容一樣的問題，原因的話一樣是因為他們引用的地址一樣，如果想要顯示不一樣的結果做分開處理的話，可以在computed 裡面做深拷貝，再改成監聽 computed 的變數就可以喽！
