Vue3中的Hook特性是什么

這篇文章主要講解了“Vue3中的Hook特性是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue3中的Hook特性是什么”吧！

Hook 的概念

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

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

可以看出，和 Vue 不同，它是一個單向的數(shù)據(jù)流。Vue 的讀音是視圖的 "view"，而 "state"，就是狀態(tài)的意思。如果說 Vue 是視圖導(dǎo)向，React 就是狀態(tài)導(dǎo)向。

既然 React 是用 Class 實(shí)現(xiàn)組件，那么問題就隨之而來：在 Class 內(nèi)必須注意 this 的指向問題；而且在組件發(fā)生復(fù)用和嵌套時，對每一層組件的 props 都要進(jìn)行操作，邏輯復(fù)雜。

于是函數(shù)組件誕生，為 React 實(shí)現(xiàn)了狀態(tài)（state）分離。

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

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

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

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

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

自定義 Hook

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

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

在實(shí)踐中，mixin 有如下缺點(diǎn)：

• 引入了隱式依賴關(guān)系。

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

• mixin 代碼會導(dǎo)致滾雪球式的復(fù)雜性

• 多個 mixin 導(dǎo)致合并項(xiàng)不明來源

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

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

• 造成地獄嵌套

不過使用全新的 Hook 組件結(jié)構(gòu)，可以實(shí)現(xiàn)平鋪式調(diào)用組件的復(fù)用部分，解決了 mixin 的來源不明和 HOC 的地獄嵌套問題。

Vue 3 實(shí)現(xiàn) Hook

前面說到 React 將 Class 組件轉(zhuǎn)變?yōu)楹瘮?shù)組件，實(shí)現(xiàn)了 Hook。在 Vue 3 中，Hook 是通過 Vue 3 新特性的最重要的部分——組合式 API 來實(shí)現(xiàn)的。

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

利用組合式 API，就可以仿照 React 的寫法來實(shí)現(xiàn)一個 Hook。例如這是一個文件系統(tǒng)管理的例子：

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

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

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

感謝各位的閱讀，以上就是“Vue3中的Hook特性是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue3中的Hook特性是什么這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！