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。
跟我寫一個封裝的函數，沒有什么區別；
這里來看確實是沒有什么太大的區別。