【vue3练习 -09】vue3使用hook、自定义hook

释义：把一些组件通用的方法，数据、生命周期、方法等一些vue常用的配置整合到一起，

本质是一个函数，像vue2的mixin但又不太像（因为mixin可以直接this拿到引入页面的实例对象所有数据并直接修改，而hook没办法直接拿到或许能传过去，但总感觉没mixin用起来顺手）

用法示例：

定义个获取鼠标坐标的hook

新建js文件，名为useCoordinate.js，在需要使用的某个页面或组件引入useCoordinate.js

js代码：

import { reactive, onBeforeUnmount,} from "vue";//相关vue的api在此处引入

// 此处我使用默认暴露，具体看你自己习惯
export default function () {
    let obj = reactive({
        x: 0,
        y: 0,
    });
    // 定义坐标赋值的方法
    function getCoordinate(event) {
        obj.x = event.pageX;
        obj.y = event.pageY;
    }
    window.addEventListener("mousemove", getCoordinate); //往Window上添加鼠标移入事件
    // 组件销毁时移除当初添加的鼠标移入事件
    onBeforeUnmount(() => {
        window.removeEventListener("mousemove", getCoordinate);
    });
    return obj//函数必须得有返回值
}

vue代码（使用hook的页面代码）

<template>
  <h1 >当前鼠标的坐标为：x:{{ obj.x }}-y:{{ obj.y }}</h1>
</template>

<script>
import getCoordinate from '../hooks/useCoordinate.js'
export default {
  name: "VueHook",
  setup() {
    //使用hook，因为他是个函数且有返回值所以可以接收一下
    // 再且他返回的值是已经是reactive定义好的proxy对象，所以无需再次用reactive定义，直接下面return模板里面即可正常使用
    let obj = getCoordinate()
    return {
      obj,
    };
  },
};
</script>

<style lang="" scoped>
</style>