前言
我们知道，
React社区，已经全面拥抱Hook。Vue3的发布也支持了自定义Hook，作为只会Vue2的前端码农自然要去看看Vue3 Hook到底有何魔力
从不了解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…
