Vue3中hook的简单使用

创建文件夹

在src下创建文件夹。文件名称为hooks。
hooks下的文件夹下，是你的封装的hook；
通过命名为useXXXXXX

usexy.js 文件是封装的获取屏幕的坐标

 import {
    onBeforeUnmount,
    onMounted,
  ref
} from "vue";
export default function () {
    let x = ref("0")
    let y = ref("0")
    // 如果这个文件是ts， e的类型应该是 MouseEvent
    let pageHander=function(e){
      console.log(e)
      x.value=e.pageX;
      y.value=e.pageY;
    }
    // 需要使用生命周期函数，页面加载完成
    onMounted(()=>{
      window.addEventListener("click",pageHander)
    })

    // 在页面即将卸载时，移除事件的监听
    onBeforeUnmount(()=>{
      window.removeEventListener("click",pageHander )
    })
    return {x,y}
}

使用的页面

<template>
  <div>
    <p>横坐标{{x}}</p>
    <p>纵坐标{{y}}</p>
  </div>
</template>
<script>
import getxy from "../src/hooks/usexy.js"
export default {
  name: "App",
  setup() {
   let {x,y}=getxy()
   return {x,y}
  }
};
</script>

也许大家会觉得这里的hooks。
跟我写一个封装的函数，没有什么区别；
这里来看确实是没有什么太大的区别。