vue3之hooks

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集合库