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

1、Composition API + script setup

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

圖片

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

當(dāng)你在組件中接收 props 的時(shí)候，如果只是簡(jiǎn)單的解構(gòu)的話，是沒有響應(yīng)式的。

圖片

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

圖片

3、Hooks 的封裝

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

圖片

圖片

4、watchEffect

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

圖片

5、provide + inject

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

圖片

6、shallowRef

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

圖片

7、defineExpose

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

圖片

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

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

圖片