Vue-hooks（钩子）

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