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 專案中使用 Apollo Graphql Client 從 API 獲取資料，由於資料結構較為複雜，筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中，需要使用 defineProps 來撰寫型別定義，結果⋯⋯
這篇文章記錄了如何在網頁中使用<iframe>或套件vue3-google-map來實現Google Map呈現，並在上面設置圖釘。兩種方法的優缺點也有相關的說明。想要在網頁上加入Google Map及設置圖釘的讀者可以參考這篇文章。
父元件
傳遞方法使用@
<template>
...
<Login @modalClose="modalClose"/>
...
</template>
<script setup>
const _modal = ref();
function m
父元件
傳遞變數時須加上冒號
子元件
接收props用法如下
本筆記參考:
1. https://www.netlify.com/blog/understanding-defineprops-and-defineemits-in-vue-3.2
2. https://juejin.cn/post/7
雖然距離上次Vue直播班課不到一年，但看到這次的課程有Pinia內容，手又不小心刷了魔法小卡(?
意識到自己的成長應該是可以輕鬆地串接API，畢竟去年也已經串到可以去烤串店了XD，就算是重新複習，還是可以從中獲得新的成長，而且發現到老師一年講的比一年還好，今年有很多觀念講得更清楚了！
可惜這次第六週
最近在把 Tailwind CSS 加入我的技能樹中，其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具
但是我其實對美工比較沒那麼大的興趣，我對功能、效能、安全比較感興趣，所以後端、架站、DevOps、一些安全防護玩了一圈，現在來加強我的排版功力
專案建好了，那先來講 Vue 的專案架構
詳細內容很多，所以我挑重點講
public
index.html
public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
Create project
裝好 vue CLI 之後，只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉
1. Pick a preset
2. Select the features
3. Choose the version of vue
選擇 vue3
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料，由於資料結構較為複雜，筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中，需要使用 defineProps 來撰寫型別定義，結果⋯⋯
這篇文章記錄了如何在網頁中使用<iframe>或套件vue3-google-map來實現Google Map呈現，並在上面設置圖釘。兩種方法的優缺點也有相關的說明。想要在網頁上加入Google Map及設置圖釘的讀者可以參考這篇文章。
父元件
傳遞方法使用@
<template>
...
<Login @modalClose="modalClose"/>
...
</template>
<script setup>
const _modal = ref();
function m
父元件
傳遞變數時須加上冒號
子元件
接收props用法如下
本筆記參考:
1. https://www.netlify.com/blog/understanding-defineprops-and-defineemits-in-vue-3.2
2. https://juejin.cn/post/7
雖然距離上次Vue直播班課不到一年，但看到這次的課程有Pinia內容，手又不小心刷了魔法小卡(?
意識到自己的成長應該是可以輕鬆地串接API，畢竟去年也已經串到可以去烤串店了XD，就算是重新複習，還是可以從中獲得新的成長，而且發現到老師一年講的比一年還好，今年有很多觀念講得更清楚了！
可惜這次第六週
最近在把 Tailwind CSS 加入我的技能樹中，其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具
但是我其實對美工比較沒那麼大的興趣，我對功能、效能、安全比較感興趣，所以後端、架站、DevOps、一些安全防護玩了一圈，現在來加強我的排版功力
專案建好了，那先來講 Vue 的專案架構
詳細內容很多，所以我挑重點講
public
index.html
public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
Create project
裝好 vue CLI 之後，只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉
1. Pick a preset
2. Select the features
3. Choose the version of vue
選擇 vue3