为什么使用hooks，什么情况下使用hooks

背景

在react，vue3 这种主流前端框架中都会去使用hook来抽离公共逻辑代码，那么为什么要使用hooks来封装呢，使用普通函数不也一样可以实现逻辑抽离吗？

hook是什么

钩子编程（hooking) 是计算机程序设计术语, 通过拦截软件模块间的函数调用、消息传递、事件传递来修改或扩展操作系统、应用程序或其他软件组件的行为的各种技术。处理被拦截的函数调用、事件、消息的代码，被称为钩子（hook）。

我的理解：hook就是一个函数，它用了react或者是vue中的勾子函数后就成了hook函数，就像vue2中mixin一样，使用vue的生命周期勾子函数；其实hook就是mixin的一个替代

为什么要替代mixin？

mixin 的缺点：一个组件中混入多个mixin，然后其中几个mixin有相同的方法和名称，这个时候就会发生混乱，也不知道用的是哪个mixin里面的方法了，查找也麻烦

hook的优势

hook使用可以非常方便得知道是哪个hook引入得方法，维护很方便
比如这样引入一个hook

<script setup>
import { useMousePosition } from '@/hooks/test'
const { x, y } = useMousePosition()
</script>

我们能知道这是hooks文件夹下的test文件引入