vue-hooks

最近尤大發布了一個最新的npm包：vue-hooks 。 既喜且優，真是一個悲傷的故事。 這個npm包是關於hook（鉤子）一個最新思路的探索，也是react團隊前不久的首創…

hooks 是什麼

Hook是react中得一項新功能提案，可以讓開發人員在不編寫Class的情況下使用狀態和其他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>
  );
}

關於react使用最新的hook，視訊 中有詳細介紹，不做過多敘述，說回vue-hooks。

在這裡我們使用了鉤子函式 useData ,以及 useComputed，並且通過一個全新的函式 hooks 將兩個鉤子函式組裝後的資料 data , double 返回。下面的圖是一個通俗的寫法：

對比下來，可以看到，程式碼整體的邏輯變化並不大，這正是它的牛逼之處。

其中有幾點注意事項：

1. 自由可選。開發者可以在現有的專案中，隨意挑選幾個元件中來嘗試Hooks，而無需重寫任何現有程式碼。
2. 100％向後相容。hooks不包含任何重大更改，與我們通俗寫法沒有任何區別
3. 目前討論階段。Hook目前處於alpha版本，在收到社群反饋後將會發布vue-hooks的release版本。

鉤子不會取代你對Vue生命週期概念的瞭解。相反，Hooks為已經知道的Vue概念還會提供更直接的API：props，refs。

說到這裡，很多同學可能對 hooks 的用處還是有些懵，那麼上一個有邏輯複雜的函式，提問：

如果想要重用save方法，如何實現呢？

動機

Hook充斥了vue的整個週期，解決了其中各種看似無關的問題，在編寫和維護數以萬計的元件時遇到了這些問題。其實這一點，無論是在學習Vue，還是更喜歡使用具有類似元件模型的不同庫，都可能會發現其中的一些雷同問題。

1 在元件之間重用狀態邏輯很困難

Vue提供了將可重用行為“附加”到元件的方法mixin。如果有的同學已經使用Vue一段時間，可能非常熟悉它的優點，同時也瞭解到，context內的狀態，與mixin內的context實際是完全無感，這樣才能做到方法重用。

但是mixin模式要求在使用它重構元件時，保持每一個使用到它的元件其中的data，computed等等屬性保持key的一致性，這在實際開發的過程中可以遵循，但是很難以維護。但這指出了一個更深層次的基本問題：Vue需要一個更好的原語來共享有狀態邏輯。

使用Hook，就是為了可以從元件中提取現有狀態邏輯，以便可以獨立測試並重用。鉤子允許開發者在不更改元件層次結構的情況下重用有狀態邏輯。這樣可以輕鬆地在許多元件之間或與社群共享Hook。

2 複雜的元件變得難以理解

我們經常從開發簡單元件開始，最終演變成無法管理的狀態邏輯和副作用的複雜組建。每個生命週期方法通常包含不相關邏輯的混合。

例如，元件可能會在 mounted 和 update 中執行一些data屬性上的資料操作。但是，相同的 mounted 方法可能還包含一些不相關的邏輯，比如設定事件偵聽器啊，比如初始化某個方法啊，做一些額外的判斷啊等等。

這些相互關聯的程式碼一旦被拆分，最終又組合在一個方法中。這就造成了錯誤和屬性不一致。

在許多情況下，不可能將這些元件分解為較小的元件，因為狀態邏輯遍佈整個地方。測試它們也很困難。這是許多人更喜歡結合使用 Vuex 這樣的狀態管理庫相結合的原因之一。但是，這通常會引入太多的抽象，導致開發時總是在不同的檔案之間切換，實際上就造成了重用元件變得更加困難。

為了解決這個問題，Hooks的思路是將一個元件拆分為較小的函式，而不是基於生命週期方法強制拆分。同時我們還可以選擇使用 Vuex 管理元件的本地狀態，以使其更具可預測性。

期待一下vue-hooks