vue-hooks
最近尤大發(fā)布了一個(gè)最新的npm包：vue-hooks 魁蒜。 既喜且優(yōu)棺榔，真是一個(gè)悲傷的故事夫晌。 這個(gè)npm包是關(guān)于hook（鉤子）一個(gè)最新思路的探索，也是react團(tuán)隊(duì)前不久的首創(chuàng)....
hooks 是什么
Hook是react中得一項(xiàng)新功能提案曙博，可以讓開發(fā)人員在不編寫Class的情況下使用狀態(tài)和其他React功能。
// react版本
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
關(guān)于react使用最新的hook怜瞒，視頻 中有詳細(xì)介紹父泳，不做過多敘述般哼，說回vue-hooks。
在這里我們使用了鉤子函數(shù) useData ,以及 useComputed惠窄，并且通過一個(gè)全新的函數(shù) hooks 將兩個(gè)鉤子函數(shù)組裝后的數(shù)據(jù) data , double 返回蒸眠。下面的圖是一個(gè)通俗的寫法：
對(duì)比下來，可以看到杆融，代碼整體的邏輯變化并不大楞卡，這正是它的牛逼之處。
其中有幾點(diǎn)注意事項(xiàng)：
- 自由可選脾歇。開發(fā)者可以在現(xiàn)有的項(xiàng)目中蒋腮，隨意挑選幾個(gè)組件中來嘗試Hooks，而無需重寫任何現(xiàn)有代碼藕各。
- 100％向后兼容池摧。hooks不包含任何重大更改，與我們通俗寫法沒有任何區(qū)別
- 目前討論階段座韵。Hook目前處于alpha版本险绘，在收到社區(qū)反饋后將會(huì)發(fā)布vue-hooks的release版本。
鉤子不會(huì)取代你對(duì)Vue生命周期概念的了解誉碴。相反宦棺，Hooks為已經(jīng)知道的Vue概念還會(huì)提供更直接的API：props，refs黔帕。
說到這里代咸，很多同學(xué)可能對(duì) hooks 的用處還是有些懵，那么上一個(gè)有邏輯復(fù)雜的函數(shù)成黄，提問：
如果想要重用save方法呐芥，如何實(shí)現(xiàn)呢？
動(dòng)機(jī)
Hook充斥了vue的整個(gè)周期奋岁，解決了其中各種看似無關(guān)的問題思瘟，在編寫和維護(hù)數(shù)以萬計(jì)的組件時(shí)遇到了這些問題。其實(shí)這一點(diǎn)闻伶，無論是在學(xué)習(xí)Vue滨攻，還是更喜歡使用具有類似組件模型的不同庫(kù)，都可能會(huì)發(fā)現(xiàn)其中的一些雷同問題蓝翰。
1 在組件之間重用狀態(tài)邏輯很困難
Vue提供了將可重用行為“附加”到組件的方法mixin光绕。如果有的同學(xué)已經(jīng)使用Vue一段時(shí)間，可能非常熟悉它的優(yōu)點(diǎn)畜份，同時(shí)也了解到诞帐，context內(nèi)的狀態(tài)，與mixin內(nèi)的context實(shí)際是完全無感爆雹，這樣才能做到方法重用停蕉。
但是mixin模式要求在使用它重構(gòu)組件時(shí)愕鼓，保持每一個(gè)使用到它的組件其中的data，computed等等屬性保持key的一致性谷徙，這在實(shí)際開發(fā)的過程中可以遵循拒啰，但是很難以維護(hù)。但這指出了一個(gè)更深層次的基本問題：Vue需要一個(gè)更好的原語(yǔ)來共享有狀態(tài)邏輯完慧。
使用Hook谋旦，就是為了可以從組件中提取現(xiàn)有狀態(tài)邏輯，以便可以獨(dú)立測(cè)試并重用屈尼。鉤子允許開發(fā)者在不更改組件層次結(jié)構(gòu)的情況下重用有狀態(tài)邏輯册着。這樣可以輕松地在許多組件之間或與社區(qū)共享Hook。
2 復(fù)雜的組件變得難以理解
我們經(jīng)常從開發(fā)簡(jiǎn)單組件開始脾歧，最終演變成無法管理的狀態(tài)邏輯和副作用的復(fù)雜組建甲捏。每個(gè)生命周期方法通常包含不相關(guān)邏輯的混合。
例如鞭执，組件可能會(huì)在 mounted 和 update 中執(zhí)行一些data屬性上的數(shù)據(jù)操作。但是兄纺，相同的 mounted 方法可能還包含一些不相關(guān)的邏輯大溜，比如設(shè)置事件偵聽器啊，比如初始化某個(gè)方法啊估脆，做一些額外的判斷啊等等钦奋。
這些相互關(guān)聯(lián)的代碼一旦被拆分，最終又組合在一個(gè)方法中疙赠。這就造成了錯(cuò)誤和屬性不一致付材。
在許多情況下，不可能將這些組件分解為較小的組件圃阳，因?yàn)闋顟B(tài)邏輯遍布整個(gè)地方厌衔。測(cè)試它們也很困難。這是許多人更喜歡結(jié)合使用 Vuex 這樣的狀態(tài)管理庫(kù)相結(jié)合的原因之一捍岳。但是葵诈，這通常會(huì)引入太多的抽象，導(dǎo)致開發(fā)時(shí)總是在不同的文件之間切換祟同，實(shí)際上就造成了重用組件變得更加困難。
為了解決這個(gè)問題理疙，Hooks的思路是將一個(gè)組件拆分為較小的函數(shù)晕城，而不是基于生命周期方法強(qiáng)制拆分。同時(shí)我們還可以選擇使用 Vuex 管理組件的本地狀態(tài)窖贤，以使其更具可預(yù)測(cè)性砖顷。
期待一下vue-hooks
--------------------------------文章對(duì)你有用贰锁，感謝隨手點(diǎn)個(gè)贊-------------------------------
