【Vue】響應式基礎 (Reactivity Fundamentals)
Document: https://vuejs.org/guide/essentials/reactivity-fundamentals.html
響應式物件 (Reactive objects)
能夠追蹤物件的存取權與狀態改變
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
SFC (Single-File Component) vs Codepen
option api
composition api
- 創建
- 使用
- 方法宣告
DOM 的更新時機
DOM 的更新是非同步的(不是你按下 Click Me 按鈕 DOM 就會馬上更新),使用 nextTick() 來確保 DOM 已經完全更新
深層響應
預設都是深層響應 (有淺層響應 shallowReactive)
【響應式 proxy】 與 【原始對象】
-> 要更改 proxy 才會具有響應式
reactive() 的限制
- 只能作用在 object type (string、number、boolean 都不能作用)
- 響應式系統是通過屬性追蹤
更改區域變數、解構物件或是函數參數的值都不會影響原始的響應式物件
使用 ref()
ref() 會回傳一個 reactive 的物件( ref ),包含一個 value 屬性
ref 物件在模板中的展開( unwrapping )
你不用寫 .value
ref 物件在響應式物件中的展開
- ref 物件如果被當成 reactive 物件的屬性,也會自己展開
- array 與 collection 中不會自動展開(你要自己加上
.value
)
小結
- option api 中的 data 在 composition api 中 要使用 reactive() 或 ref() 來宣告
- reactive() 只能用在物件上
- ref 物件除了陣列與集合,其他都不需要用
.value
其他
option api 中的 debounce function
因為 Vue 的方法都是有狀態的 (stateful),在 Vue 中如果同時調用 debounce function component 之間就可能會互相影響
- Stateful: 一個方法的計算結果會影響到其他程式碼就稱為 Stateful,反之稱為 Unstateful
- debounce 是一種控制事件觸發頻率的方法,當一個事件被觸發時,它會延遲一段時間,如果在這段時間內有其他事件被觸發,則這個事件會被忽略掉。透過 debounce,可以控制事件的觸發頻率,防止事件被過度觸發。
解決方法: 把 debounce 的創建移到 created 週期
提問
- 什麼時候要用 ref(),什麼時候用 reactive()
- debounce ?
補充
Reactivity
Collection
pinia cheat sheet
