什么是hooks

hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks 还真是函数的一种写法。

vue3 借鉴 react hooks 开发出了 Composition API ，所以也就意味着 Composition API 也能进行自定义封装 hooks。

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是提取一些可以复用的公共方法/功能。

其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

Mixin和Hooks区别

假设有个需求：

当组件实例创建时，需要创建一个 state 属性：name，并随机给此 name 属性附一个初始值。除此之外，还得提供一个 setName 方法。你可以在组件其他地方开销和修改此状态属性。

更重要的是: 这个逻辑要可以复用，在各种业务组件里复用这个逻辑。 在拥有hooks之前，首先想到的就是Mixin；而Mixin也有它的弊端：

比如：

1.会出现覆盖，同名，名字混合

2.无法传入参数，限制了Mixin的灵活性

相比之下vue3的hooks通过导出/导入，在使用的时候直接引入响应的方法就可以使用了，非常方便；