vue3之hooks
Hooks （钩子）是由 React 提出，但是它的本质是一种重要的代码组合机制，对于整个 JavaScript 的框架系统都大有好处；
Hooks 提供了一种更明确的方式来组织代码，使得代码能重用，更重要的是，两个钩子之间可以传值
gouA(gouB());
Vue 官方给出的自定义 Hook 的例子是这样的：
import { ref, onMounted, onUnmounted } from "vue";export function useMousePosition() {
  const x = refconst的作用(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 };
  },};
就这么简单，无需多言。在任何组件中我们需要「获取响应式的鼠标位置」，并且和我们的「视图层」关联起来的时候，仅仅需要简单的一句话即可。
我们约定这些「自定义 Hook」以 use 作为前缀，和普通的函数加以区分。
vueuse库，就是一堆hooks集合库

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。