vue3自定义hook函数

什么是hook函数?

本质就是一个函数，把setup函数中使用的Composition API进行封装

类似于vue2中minxi

自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

创建一个hook文件夹，里面创建文件usePoint.js

import { onMounted , reactive, onBeforeUnmount} from 'vue';
export default function(){
    let point = reactive({
        x:0,
        y:0
    })
   function savePoint(event){
       point.x = event.pageX;
       point.y = event.pageY;
       console.log(`x轴:${point.x},y轴${point.y}`)
   }
   onMounted(()=>{
    window.addEventListener('click',savePoint)
   })
   onBeforeUnmount(()=>{
       window.removeEventListener('click',savePoint)
   })
   return point;
}

<template>
  <div class="about">
      <h2>当前鼠标点击的坐标 : {{point.x}} --- {{point.y}}</h2>
  </div>
</template>
<script>
import usePoint  from '../hook/usePoint'
export default{
  name:'AboutView',
  setup(){
      const point = usePoint();
      return {point};
  }
}
</script>

如图: