Vue 3 自學筆記 | Nuxt watch
目前的話使用的是OptionsAPI的寫法,watch是一個蠻好用的監聽器,他不僅可以監聽data、computed的資料,也可以監聽vue-router的url等等,現在先來介紹一下他的基本應用:他的基本結構:watch:{要監聽的目標(){ //處理方法}}基本範例:exportdefault{data(){return{ text: }},watch:{text(newValue,oldValue){ if(newValue.length>=10){ console.log(newValue) }}}}這段的內容是定義一個名為text的資料,當text的長度超過10字元的時候就將他打印出來。在watch裡面可以看到代入了newValue和oldValue兩個參...
目前的話使用的是 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),代表了我要使用裡面的全部資料,難道要我把每一個值都寫一遍嗎?
這個倒是不用,讓我們來進入深度監聽的方法
方法二:深度監聽
注意:深度監聽的前提是監聽的...