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

1、Composition API + script setup

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

圖片

2、toRefs 響應式解構(gòu)

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

圖片

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

圖片

3、Hooks 的封裝

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

圖片

圖片

4、watchEffect

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

圖片

5、provide + inject

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

圖片

6、shallowRef

當有大數(shù)據(jù)量的數(shù)組或者對象時，我們?nèi)绻恍枰O(jiān)聽淺層響應式變化的話，可以不需要使用 ref，而是使用 shallowRef，這樣的話只會監(jiān)聽淺層變化，而不會監(jiān)聽深層變化，提升了性能。

圖片

7、defineExpose

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

圖片

8、effectScope 全局狀態(tài)管理

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

圖片