前言

我們知道，React社區(qū)，已經(jīng)全面擁抱Hook。Vue3的發(fā)布也支持了自定義Hook，作為只會Vue2的前端碼農(nóng)自然要去看看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的小伙伴應(yīng)該都有被Mixin支配過，特別是拿到應(yīng)該不熟悉的項目的時候，簡直是噩夢，各種Mixin，各種變量，方法，完全看不出從哪來的。

從代碼中使用中可以清晰的找到鼠標位置X,Y來自于useMousePosition函數(shù)，useMousePosition就是一個函數(shù)，使用了composition-api定義了響應(yīng)式數(shù)據(jù)X，Y然后導(dǎo)出，個人感覺是將mixin拆分了，將導(dǎo)入的操作交給了開發(fā)者，以前是vue直接幫我們把數(shù)據(jù)合并在了一起，反而導(dǎo)致了數(shù)據(jù)無從溯源的問題。

個人理解，歡迎糾正

• hook可以當作以前mixin的來用
• hook是一個函數(shù)，mixin是一個對象
• hook就是拆分版的mixin，將導(dǎo)入操作交給開發(fā)者，mixin是根據(jù)對應(yīng)的options Api直接merge到組件了
• hook可以借用composition-api完全使用vue的能力，簡而言之就是你在setup函數(shù)用能用的hook都能用.

參考

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

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

3、螢火之森：https://blog.xkongkeji.com