vue3.0 hooks的写法

800 阅读1分钟

1.创建hooks文件

import { ref, onMounted, onBeforeUnmount } from "vue";
export default function () {
    const x = ref(-1);
    const y = ref(-1);
    const clickHandler = (event: MouseEvent) => {
        x.value = event.pageX;
        y.value = event.pageY;
    };
    onMounted(() => {
        window.addEventListener("click", clickHandler);
    });
    onBeforeUnmount(() => {
        window.removeEventListener("click", clickHandler);
    });
    return {
        x,
        y
    }
}

2.页面使用

import useMousePosition  from "../hooks/useMousePosition";
export default defineComponent({
  name: "Home",
  components: {
    Child,
  },
  setup() {
      const {x,y}=useMousePosition()
        return {
          x,
          y
      };
   }
});