簡單聊聊Vue3中的Hook特性（總結分享）

本篇文章給大家帶來了為什么要使用 Hook，Vue 3 的 Hook 和 React 有何不同，接下來通過此文分享一下，希望對大家有幫助。

Hook 的概念

Hook 這個概念是在 React 中被提出的。首先簡單介紹一下在 React 中，Hook 是怎么來的。

參考大家熟知的 Vue 2 代碼結構，我們看到：React 整體使用 Class 來封裝一個組件；設計了一個 state 來管理變量，相當于 Vue 2 中的 data；同樣擁有生命周期和自定義方法；模板部分借助 JSX 寫進一個渲染函數。如果需要更新視圖，必須通過 setState 方法更新 state 中的變量，然后視圖上的數據才隨之更新，不能直接通過更新視圖來更新數據。

可以看出，和 Vue 不同，它是一個單向的數據流。Vue 的讀音是視圖的 "view"，而 "state"，就是狀態的意思。如果說 Vue 是視圖導向，React 就是狀態導向。

既然 React 是用 Class 實現組件，那么問題就隨之而來：在 Class 內必須注意 this 的指向問題；而且在組件發生復用和嵌套時，對每一層組件的 props 都要進行操作，邏輯復雜。

于是函數組件誕生，為 React 實現了狀態（state）分離。

這里把變量的聲明、組件方法、渲染函數全部封裝到一個函數中，新增了一個useEffect 來實現生命周期和監聽 state 數據的變化。這個組件在被聲明、更新、即將銷毀時，都會調用定義它的函數，輸出一個新的視圖。

再來看 Vue 3 中如何定義一個組件：

是不是與上面的寫法及其相似？不過雖然寫法很像，他們在實現上還是有很大區別的。我們前面提到，React 是狀態導向，而 Vue 是視圖導向。React 函數組件通過重新調用函數來更新視圖，把生命周期融入了組件聲明；而 Vue 的 setup 方法只替代了 beforeCreate 和 created，其他生命周期依然保留在組件內部定義，每個實例只運行一次 setup，同時支持監聽視圖和數據的變化。

常有人說 Vue 是又實現了一次 React，但是兩者理念完全不同，其實可以理解為，Vue 在保留自身特性的同時，采取了 React 的設計方式。

所以什么是 Hook ？ 在 React 中的定義是，在函數組件中保留 state 數據的同時，融入生命周期函數，將組件整體作為一個鉤子函數。

自定義 Hook

當組件復雜時，多個組件中一些重復的邏輯可以被抽象出來。在 Hook 誕生之前，React 和 Vue 都擁有高階組件的設計模式，在 React 使用到 HOC，在 Vue 2 中使用到 mixin。為什么要舍棄它們而使用 Hook，使用自定義 Hook 又有哪些優點，我們先簡單了解一下 HOC 和 mixin ，對比后便知。

HOC 的原理是把組件作為參數傳入一個函數，加入復用部分后將新的組件作為返回值，使用了裝飾器模式。mixin 像是把復用的部分拆解成一個個小零件，某個組件需要時就拼接進去。

在實踐中，mixin 有如下缺點：

• 引入了隱式依賴關系。

• 不同 mixins 之間可能會有先后順序甚至代碼沖突覆蓋的問題

• mixin 代碼會導致滾雪球式的復雜性

• 多個 mixin 導致合并項不明來源

為了避開這些問題，React 采用 HOC，但它依然存在缺陷：

• 一個組件的state影響許多組件的props

• 造成地獄嵌套

不過使用全新的 Hook 組件結構，可以實現平鋪式調用組件的復用部分，解決了 mixin 的來源不明和 HOC 的地獄嵌套問題。

Vue 3 實現 Hook

前面說到 React 將 Class 組件轉變為函數組件，實現了 Hook。在 Vue 3 中，Hook 是通過 Vue 3 新特性的最重要的部分——組合式 API 來實現的。

使用組合式 API 編寫組件，簡單來說，之前根據數據類型拆分成的 data 、methods、生命周期等都被放在一個 setup 函數中，而組件在初始化時也只需要調用一次 setup 函數。具體的 API 這里不作詳細介紹，可以去查閱官方文檔。（antfu 講解組合式 API）

利用組合式 API，就可以仿照 React 的寫法來實現一個 Hook。例如這是一個文件系統管理的例子：

想象一下，如果這段代碼在 Vue 2 里實現，僅僅是一個創建文件夾的動作，就要把聲明的變量、方法、監聽數據等拆解到各個部分，更何況我們還要實現刪除、 編輯、復制粘貼等等功能，修改代碼的工作量想想就非常龐大。

但是用這種 Hook 的形式編寫，我們可以把實現同一個功能的代碼組合在一起，不僅代碼非常簡潔清晰，而且我們也可以很好地知道復用組件的來源。

比起 React 的 Hook，Vue 3 在底層還做了一些優化，解除 react 函數組件的限制，提高了性能。

總結

本文大致內容如下：

思考

為什么會有 hook 這種概念，而不用原來的 HOC 、mixin，可以看出在程序開發上一個進步的大方向就是越來越抽象化，類似于從C語言這種面向過程編程的語言發展到 java 這種面向對象編程的語言，從原生的前端三劍客發展到使用框架做組件開發，Hook 做的是同樣的事情。把相關的邏輯封裝到一起，無關的隔離開來，降低耦合度，把復用邏輯以接口的形式暴露給其他組件，屏蔽底層的實現。

這樣同樣的功能在寫法上更加簡潔，修改單個功能不會牽扯到隱藏的依賴，降低維護的復雜度，規定的 use 命名使得代碼易讀、易擴展，也有利于多人協作。

state 在 React 中是很重要的概念，用作狀態管理的 Redux 其實是為了使得 React 中的 state 便于管理，而 Vue 實現了一個類似的 Vuex，卻沒有 state 機制。類似地，兩者的 Hook 也都用到 effect，在 React 中 effect 也是為了解決 state 問題，Vue 使用它的機制完全不同。

React 像是實現了一個以狀態機為中心思想的系統，零件之間邏輯緊密，而 Vue 用自己的方法重新實現了 React 中的一些方法，使其完全分割開，需要哪個就把哪個組裝進來。他們用的是兩個完全不同的理念，不能說誰更好，但是在學習一個框架的時候，可以通過參考另一種框架的設計思路來加深理解。

前段時間尤雨溪在知乎上也回答了一個問題提到說，從 AngularJS、React 到 Vue，其實是理念上的進步，如果你只是仿照這些思想做一個新的框架，那就只是在造輪子而已，而想要做一個里程碑式的進步，改進理念才是我們應該做的。

【