Vue 3 自學筆記 - watch 的使用

圈圈
圈圈
2023/03/13閱讀時間約 3 分鐘
目前的話使用的是 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 的變數就可以喽！


圈圈
圈圈
留言0
查看全部
發表第一個留言支持創作者！
從 Google News 追蹤更多 vocus 的最新精選內容