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 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
在 Vue.js 中，watch 是用來監控數據變化並執行副作用的工具。副作用指的是函數對外部狀態的變更，例如更新 DOM、進行網絡請求或修改全局變量。watch 允許我們在數據變化時自動響應，這對於處理異步操作和更新狀態非常有用。它也支持深層監聽和清理功能，能夠應對複雜的副作用場景。
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
2023 Vue直播班筆記 - 動態路由Props，接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Vue Router 動態路由，假設有一個賣場，裡面有 100 個商品，我們不可能針對它們創 100 對應的路由，因此我們需要一個動態路由，利用"路徑帶參數"的方式來撈取商品的資訊。
v-model 指令是 Vue 中一個非常重要的功能，它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
在 Vue 3 的 Composition API 中，引入了兩個重要的響應式數據處理工具：ref 和 reactive，本文將介紹ref 和 reactive，並透過實際範例來解釋它們的用法和差異。
在 Vue 中，watch是用於進行數據監聽的，可以用來響應式的監聽資料的變化並執行相應的操作。本文介紹watch功能，並透過實際範例讓你更好的理解。
在 Vue 中，methods和computed是用於定義元件的行為和計算屬性。本文將介紹methods和computed屬性的使用方法和區別，並通過實際範例來幫助你理解。
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
在 Vue.js 中，watch 是用來監控數據變化並執行副作用的工具。副作用指的是函數對外部狀態的變更，例如更新 DOM、進行網絡請求或修改全局變量。watch 允許我們在數據變化時自動響應，這對於處理異步操作和更新狀態非常有用。它也支持深層監聽和清理功能，能夠應對複雜的副作用場景。
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
2023 Vue直播班筆記 - 動態路由Props，接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Vue Router 動態路由，假設有一個賣場，裡面有 100 個商品，我們不可能針對它們創 100 對應的路由，因此我們需要一個動態路由，利用"路徑帶參數"的方式來撈取商品的資訊。
v-model 指令是 Vue 中一個非常重要的功能，它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
在 Vue 3 的 Composition API 中，引入了兩個重要的響應式數據處理工具：ref 和 reactive，本文將介紹ref 和 reactive，並透過實際範例來解釋它們的用法和差異。
在 Vue 中，watch是用於進行數據監聽的，可以用來響應式的監聽資料的變化並執行相應的操作。本文介紹watch功能，並透過實際範例讓你更好的理解。
在 Vue 中，methods和computed是用於定義元件的行為和計算屬性。本文將介紹methods和computed屬性的使用方法和區別，並通過實際範例來幫助你理解。