Vue3 Hook 到底是啥黑魔法？

早就听说，React社区，已经全面拥抱Hook。Vue3的发布也支持了自定义Hook，作为只会Vue的前端小码农自然要去看看Vue3 Hook到底是啥黑魔法？

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com

从不了解React Hook的角度来看一下啥是Hook？

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();
    return { x, y };
  },
};

相信写vue2的小伙伴应该都有被Mixin支配过，特别是拿到应该不熟悉的项目的时候，简直是噩梦，各种Mixin，各种变量，方法，完全看不出从哪来的。

从代码中使用中可以清晰的找到鼠标位置X,Y来自于useMousePosition函数，useMousePosition就是一个函数，使用了composition-api定义了响应式数据X，Y然后导出，个人感觉是将mixin拆分了，将导入的操作交给了开发者，以前是vue直接帮我们把数据合并在了一起，反而导致了数据无从溯源的问题。