Vue 3 自學筆記 - watch 的使用
更新於 發佈於 閱讀時間約 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會員
1內容數
留言0
查看全部
你可能也想看
Google News 追蹤
在創作的路上真的很多人問我說
到底要怎麼做出符合自己期待
但又可以表現得很有美感的作品？🥹
這個問題真的應該是每個創作者都一直在學習的課題吧！
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
在 Vue.js 中，watch 是用來監控數據變化並執行副作用的工具。副作用指的是函數對外部狀態的變更，例如更新 DOM、進行網絡請求或修改全局變量。watch 允許我們在數據變化時自動響應，這對於處理異步操作和更新狀態非常有用。它也支持深層監聽和清理功能，能夠應對複雜的副作用場景。
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
2023 Vue直播班筆記 - 動態路由Props，接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Vue Router 動態路由，假設有一個賣場，裡面有 100 個商品，我們不可能針對它們創 100 對應的路由，因此我們需要一個動態路由，利用"路徑帶參數"的方式來撈取商品的資訊。
在創作的路上真的很多人問我說
到底要怎麼做出符合自己期待
但又可以表現得很有美感的作品？🥹
這個問題真的應該是每個創作者都一直在學習的課題吧！
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
在 Vue.js 中，watch 是用來監控數據變化並執行副作用的工具。副作用指的是函數對外部狀態的變更，例如更新 DOM、進行網絡請求或修改全局變量。watch 允許我們在數據變化時自動響應，這對於處理異步操作和更新狀態非常有用。它也支持深層監聽和清理功能，能夠應對複雜的副作用場景。
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
2023 Vue直播班筆記 - 動態路由Props，接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Vue Router 動態路由，假設有一個賣場，裡面有 100 個商品，我們不可能針對它們創 100 對應的路由，因此我們需要一個動態路由，利用"路徑帶參數"的方式來撈取商品的資訊。