Vue3 Hook 到底是啥黑魔法?

·  阅读 5293
Vue3 Hook 到底是啥黑魔法?

早就听说,React社区,已经全面拥抱HookVue3的发布也支持了自定义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定义了响应式数据XY然后导出,个人感觉是将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…

分类:
前端
标签: