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直接帮我们把数据合并在了一起，反而导致了数据无从溯源的问题。

个人理解，欢迎纠正

• hook可以当作以前mixin的来用
• hook是一个函数，mixin是一个对象
• hook就是拆分版的mixin，将导入操作交给开发者，mixin是根据对应的options Api直接merge到组件了
• hook可以借用composition-api完全使用vue的能力，简而言之就是你在setup函数用能用的hook都能用.

参考

1、[精读《Vue3.0 Function API》] juejin.cn/post/684490…

2、[Vue3 究竟好在哪里？（和 React Hook 的详细对比）])]segmentfault.com/a/119000002…