背景
Hook概念：在react中被提出的，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来，而hooks就是这些钩子
react中的组件标准写法是类class，如下：
import React, { Component } from "react";
export default class Button extends Component {
constructor() {
super();
this.state = { buttonText: "Click me, please" };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(() => {
return { buttonText: "Thanks, been clicked!" };
});
}
render() {
const { buttonText } = this.state;
return <button onClick={this.handleClick}>{buttonText}</button>;
}
}
由于这样的写法导致大型组件难以拆分和重构，业务逻辑容易分散在组件的各个方法之中。便开始出现了hooks，设计目的：加强版函数组件，不使用class，就能写出一个全功能的组件
所有的钩子都是为函数引入外部功能，比如说useState：用于为函数组件引入状态，useContext：共享状态，用于组件之间共享状态，useEffect：用来引入具有副作用的操作，最常见的就是向服务器请求数据
除此之外还可以自定义Hook
Vue中的Hook
当组件复杂时，多个组件中一些重复的逻辑可以抽取出来，在vue2中使用到mixin，mixin像是把复用的部分拆解成一个个小零件，某个组件需要时就拼接进去
mixin存在弊端：1、引入了隐式依赖关系；2、不同mixins之间可能会有先后顺序以及代码冲突的问题；3、多个mixin导致合并项不明来源；4、mixin代码导致滚雪球式的复杂性
使用Hook可以实现平铺式调用组件的复用部分，可以灵活传递任何参数来改变它的逻辑，可以在引入的时候对同名变量重命名，解决了 mixin 的来源不明、无法向Mixin传递参数来改变逻辑。
如何实现Hook
Hook是通过vue3中的新特性：组合式API实现的，将代码通过功能分块写，响应变量和方法在一起定义和调用
使用组合式 API 编写组件：之前根据数据类型拆分成的 data 、methods、生命周期等都被放在一个 setup 函数中，而组件在初始化时也只需要调用一次 setup 函数
举例：
加法功能Hook，useAdd
减法功能Hook,useSub
组件中引入，引用时将响应式变量或者方法显式暴露出来const {nameRef，Fn} = useXX()，同时在引入的时候对同名变量重命名const {xxx：nameRef，Fn} = useXX()
