Vue3：自定义hook函数

自定义hook函数

自定义hook函数

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

具体代码如下：

1. 创建hooks文件夹，在该文件夹下创建一个usePoint.js文件，代码如下：
import { reactive, onMounted, onUnmounted } from 'vue';
export default () => {
    const point = reactive({
        x: 0,
        y: 0
    });

    const addPoint = (e) => {
        console.log(e, 'event');
        point.x = e.pageX;
        point.y = e.pageY;
    }

    onMounted(() => {
        window.addEventListener('click', addPoint);
    })

    onUnmounted(() => {
        window.removeEventListener('click', addPoint);
    })

    return point;
}

2. 在主组件内使用该usePoint.js
<template>
  <div>{{ sum }}</div>
  <button @click="sum++">sum按钮</button>
  <div>x: {{ point.x }}</div>
  <div>y: {{ point.y }}</div>
</template>

<script>
import { ref } from 'vue'
import usePoint from '../hook/usePoint';

export default {
  name: 'DemoComponent',
  setup() {
    let sum = ref(0);
    const point = usePoint()

    return {
      sum,
      point
    }
  }
}
</script>