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