vue3 hooks

HOOK概念

Hooks 就是 钩子 的意思，所以 Hook functions 也叫 钩子函数，我理解的 钩子函数的意思是：
在特定的时机会执行的函数
比如我们在开发中遇到的：

• 点击函数： 点击时才会执行的函数
• 定时器函数： 时间到了就会执行的函数
• 生命周期函数： 在组件各个时间点执行的函数
• 拦截器事件： 请求和响应时执行的函数
• 某个值改变而执行的函数： 例如 React Hooks/Vue Hooks
• github钩子： 例如 husky 的代码提交前代码检验，github ci 的监听代码提交进行构建

Vue3 Hooks相比Vue2 mixin

Hooks是VUE3中利用组合式API响应式的特性的，实现简单高效的逻辑复用、提高开发效率、提高VUE模块可维护性的工具。Hooks的组合可以让组件低代价、高效率地实现高复杂度业务，Hooks之间通常相互独立，没有过度耦合，降低后期陷入维护地狱的风险，而且可以使得功能模块更加易于测试。
在vue2中主要是使用mixin进行逻辑复用的，主要缺点为：

• 不清晰的数据来源：当使用了多个 mixin 时，实例上的数据属性来自哪个 mixin 变得不清晰，这使追溯实现和理解组件行为变得困难。这也是我们推荐在组合式函数中使用 ref + 解构模式的理由：让属性的来源在消费组件时一目了然。
• 命名空间冲突：多个来自不同作者的 mixin 可能会注册相同的属性名，造成命名冲突。若使用组合式函数，你可以通过在解构变量时对变量进行重命名来避免相同的键名。
• 隐式的跨 mixin 交流：多个 mixin 需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入，像普通函数那样。

组合式API官方文档
Vue Hooks