Hooks （钩子）是由 React 提出，但是它的本质是一种重要的代码组合机制，对于整个 JavaScript 的框架系统都大有好处；
Hooks 提供了一种更明确的方式来组织代码，使得代码能重用，更重要的是，两个钩子之间可以传值
gouA(gouB());
Vue 官方给出的自定义 Hook 的例子是这样的：
import { ref, onMounted, onUnmounted } from "vue";
export function useMousePosition() {
const x = ref(0);
const y = ref(0);
function update(e) {
x.value = e.pageX;
y.value = e.pageY;
}
onMounted(() => {
window.addEventListener("mousemove", update);
});
onUnmounted(() => {
window.removeEventListener("mousemove", update);
});
return { x, y };
}
在组件中使用：
import { useMousePosition } from "./mouse";
export default {
setup() {
const { x, y } = useMousePosition();
// other logic...
return { x, y };
},
};
就这么简单，无需多言。在任何组件中我们需要「获取响应式的鼠标位置」，并且和我们的「视图层」关联起来的时候，仅仅需要简单的一句话即可。
我们约定这些「自定义 Hook」以 use 作为前缀，和普通的函数加以区分。
vueuse库，就是一堆hooks集合库
