vue3 hooks的使用（本质是一个函数，把setup函数中使用的composition API 进行了封装）

• 什么是hook？ ----本质是一个函数，把setup函数中使用的composition API进行了封装
• 类似于vue2中的mixin
• 自定义hook的优势：复用代码,让setup中的逻辑更清晰易懂

使用方式如下：

//使用hooks的组件
<template>
  <div class="hello" id="HelloWorld">
    x轴位置：{{valz.x}}<br/>
    y轴位置：{{valz.y}}<br/>
  </div>
</template>
<script>
  //引入定义的hooks
  import point from './../hook/commonFirst'
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    setup(){
      console.log('---setup---');
      //触发执行此方法即可
      let valz=point()
      return{
        valz
      }
    },
}
</script>

//定义的hooks
import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function(){
    let point=reactive(
        {
            x:0,
            y:0
        }
    )
    function sponk(event){
        console.log(point);
        point.x=event.pageX;
        point.y=event.pageY;
        console.log(event);
    }
    onMounted(()=>{
        console.log('onMounted');
        document.getElementById('HelloWorld').addEventListener('click',sponk)
    })
    onBeforeUnmount(()=>{
        console.log('onBeforeUnmount');
        document.getElementById('HelloWorld').removeEventListener('click',sponk)
    })
    return point;
}
    

 以上只是举一个例子，就是可以公共使用所有setup的组合API