前言

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~

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

1、Composition API + script setup

使用過 Vue3 Composition API 的開發(fā)者都知道它有多么方便，相比 Vue2 的 Option API，開發(fā)體驗(yàn)得到了顯著提升。如果再結(jié)合 script setup，你會(huì)發(fā)現(xiàn) Vue 開發(fā)變得更加高效和簡(jiǎn)潔。

圖片

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

在組件中接收 props 時(shí)，如果直接進(jìn)行解構(gòu)操作，是不會(huì)保留響應(yīng)式的。

因此，使用 toRefs 來解構(gòu) props 會(huì)更好，這樣每個(gè)解構(gòu)出的屬性都會(huì)變成一個(gè) Ref，保持響應(yīng)式特性。

圖片

3、Hooks 的封裝

為了提高代碼的可復(fù)用性，可以將常用的 API 封裝成一個(gè)函數(shù)。這樣不僅方便維護(hù)，也能讓代碼更加模塊化。

圖片

圖片

4、watchEffect

watchEffect 與 watch 相比，能自動(dòng)收集依賴并監(jiān)聽響應(yīng)式的變化。它更加靈活，適用于大部分需要監(jiān)測(cè)響應(yīng)式數(shù)據(jù)的場(chǎng)景。

圖片

5、provide + inject

當(dāng)開發(fā)的組件結(jié)構(gòu)較為復(fù)雜，層級(jí)較深時(shí)，使用 props 來傳遞數(shù)據(jù)可能會(huì)變得麻煩。這時(shí)，provide 和 inject 是一個(gè)非常好的解決方案，用來進(jìn)行跨層級(jí)的數(shù)據(jù)傳遞。

圖片

6、shallowRef

當(dāng)你有大規(guī)模的數(shù)據(jù)集（如數(shù)組或?qū)ο螅r(shí)，如果你只關(guān)心淺層的響應(yīng)式變化，可以使用 shallowRef。這樣可以提升性能，因?yàn)樗槐O(jiān)聽對(duì)象或數(shù)組的淺層變化，而不對(duì)深層進(jìn)行監(jiān)控。

圖片

7、defineExpose

如果你需要在父組件中調(diào)用子組件的方法，可以使用 defineExpose 來暴露組件內(nèi)的方法，讓外部能夠方便地訪問和調(diào)用。

圖片

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

大家可能熟悉 Pinia，它的底層原理就是基于 effectScope 實(shí)現(xiàn)的。effectScope 讓我們能夠有效地管理全局或局部的狀態(tài)，而 Vueuse 中的 createGlobalState 也是基于此技術(shù)開發(fā)的。

圖片