Vue 官方發(fā)布了八個提升 Vue3 開發(fā)幸福感的小技巧
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~
最近 Vue School 發(fā)布了在 Vue 開發(fā)中能夠提高開發(fā)者幸福感的十個技巧，大家一起來看看吧~
1、Composition API + script setup
使用過 Vue3 Composition API 的開發(fā)者都知道它有多么方便，相比 Vue2 的 Option API，開發(fā)體驗得到了顯著提升。如果再結合 script setup，你會發(fā)現(xiàn) Vue 開發(fā)變得更加高效和簡潔。
圖片
2、toRefs 響應式解構
在組件中接收 props 時，如果直接進行解構操作，是不會保留響應式的。
因此，使用 toRefs 來解構 props 會更好，這樣每個解構出的屬性都會變成一個 Ref，保持響應式特性。
圖片
3、Hooks 的封裝
為了提高代碼的可復用性，可以將常用的 API 封裝成一個函數(shù)。這樣不僅方便維護，也能讓代碼更加模塊化。
圖片
圖片
4、watchEffect
watchEffect 與 watch 相比，能自動收集依賴并監(jiān)聽響應式的變化。它更加靈活，適用于大部分需要監(jiān)測響應式數(shù)據(jù)的場景。
圖片
5、provide + inject
當開發(fā)的組件結構較為復雜，層級較深時，使用 props 來傳遞數(shù)據(jù)可能會變得麻煩。這時，provide 和 inject 是一個非常好的解決方案，用來進行跨層級的數(shù)據(jù)傳遞。
圖片
6、shallowRef
當你有大規(guī)模的數(shù)據(jù)集（如數(shù)組或?qū)ο螅r，如果你只關心淺層的響應式變化，可以使用 shallowRef。這樣可以提升性能，因為它只監(jiān)聽對象或數(shù)組的淺層變化，而不對深層進行監(jiān)控。
圖片
7、defineExpose
如果你需要在父組件中調(diào)用子組件的方法，可以使用 defineExpose 來暴露組件內(nèi)的方法，讓外部能夠方便地訪問和調(diào)用。
圖片
8、effectScope 全局狀態(tài)管理
大家可能熟悉 Pinia，它的底層原理就是基于 effectScope 實現(xiàn)的。effectScope 讓我們能夠有效地管理全局或局部的狀態(tài)，而 Vueuse 中的 createGlobalState 也是基于此技術開發(fā)的。
圖片
