,,

Vue 官方教學(xué)：提升 Vue3 開發(fā)幸福感的 8 個小技巧

admin

2025年1月6日 10:17 本文熱度 956

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

1、Composition API + script setup

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

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

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

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

3、Hooks 的封裝

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

4、watchEffect

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

5、provide + inject

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

6、shallowRef

當(dāng)有大數(shù)據(jù)量的數(shù)組或者對象時，我們?nèi)绻恍枰O(jiān)聽淺層響應(yīng)式變化的話，可以不需要使用 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)的