最近 Vue School 發布了在 Vue 開發中，能讓開發者提高幸福感的十個技巧，讓我們大家來看看吧~

1、Composition API + script setup

用過 Vue3 Composition API 的朋友想必都知道有多么方便，相比于 Vue2 Option API ，開發體驗簡直是提升得不止一點，如果再加上 script setup 的話，那你寫起 Vue 來會更加快捷。

圖片

2、toRefs 響應式解構

當你在組件中接收 props 的時候，如果只是簡單的解構的話，是沒有響應式的。

圖片

所以可以使用 toRefs 來進行解構，這樣解構出來的每一個屬性都是一個 Ref。

圖片

3、Hooks 的封裝

為了可復用性，我們可以把一些復用到的 API 集合到一個函數里面去。

圖片

圖片

4、watchEffect

watchEffect 相比于 watch，它能自動幫我們收集依賴進行監聽響應式變化。

圖片

5、provide + inject

當你在封裝一些比較復雜的組件時，涉及到的組件層數會比較多的時候，使用 props 進行數據傳遞會比較麻煩，所以可以使用 provide + inject 來進行數據傳遞共享。

圖片

6、shallowRef

當有大數據量的數組或者對象時，我們如果只需要監聽淺層響應式變化的話，可以不需要使用 ref，而是使用 shallowRef，這樣的話只會監聽淺層變化，而不會監聽深層變化，提升了性能。

圖片

7、defineExpose

如果你想要在使用組件的頁面中，去調用組件中的方法，可以使用 defineExpose 將組件內部的方法暴露出來，供外部使用。

圖片

8、effectScope 全局狀態管理

Pinia 相信大家都用過吧，它其實原理就是基于 effectScope 實現的， effectScope 可以用來做全局或者局部狀態管理，Vueuse 中的狀態管理 Hooks createGlobalState 也是基于 effectScope 實現的。

圖片