[JavaScript知识库]vue3自定义hooks

自定义hooks就类似组件一样只不过只封装js，当有一段js代码需要复用可以把他封装成一个hooks进行复用
需求，在别的页面插入一个hooks实现记录鼠标点击就的坐标

可以在文件中建一个专门写hooks的文件夹可以与 component同级

把需要复用的代码写在这个js文件中

import { reactive } from '@vue/reactivity'
import{onMounted} from 'vue'
export default function(){
     let points=reactive({
          x:0,
          y:0
     })
     function myclick(event){
         points.x=event.pageX
         points.y=event.pageY
     }
     onMounted(()=>{
      //点击的是窗口所以要给窗口定义点击事件
     window.addEventListener("click",myclick)
     })
     //这里需要有一个返回值，如果不给返回值接收的是一个函数，接收的是undefind
     return points
}

写完了hooks文件就可在别的地方引用了（可以跟别的代码写在一起）