Vue3 中組合式API 與 React Hooks 的區別是？

Vue3 中組合式API 與 React Hooks 的區別是？

1. 調用順序

　　Vue3：組合式API不限制調用順序，可以有條件地進行調用

　　React-hooks：有調用順序的限制，不可以寫在條件分支中

　　查看源碼分析：例如：useState定義的變量會放在一個數組中，在條件分支中需要根據條件定義變量放入數組，若出現某個變量某種情況定義，或者某種情況不定義，則由數組下標訪問數組變量值時，出現異常

2. 性能優化

　　Vue3：

　　　　a) setup 更小的生產包體積

　　　　b) setup 無需擔心閉包變量的問題

　　　　原因：<script setup> 中的代碼位於同一作用域。不像選項式 API 需要依賴 this 上下文對象訪問屬性，被編譯的模板可以直接訪問 <script setup> 中定義的變量，無需從實例中代理。這對代碼壓縮更友好，因爲本地變量的名字可以被壓縮，但對象的屬性名則不能。

　　　　c) 無需手動緩存回調函數來避免組件更新

　　　　d) 響應系統自動捕獲依賴

　　React-hooks：

　　　　a) 擔心閉包變量的問題：定義的變量會被鉤子函數閉包捕獲

　　　　b) 使用 useMemo 和 useCallback 進行避免不必要的dom更新，提升性能優化 （不好）

　　　　c) 需要手動聲明依賴