Vue 自定义hook函数

文章目录

• ​​定义​​
• ​​使用​​

定义

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

使用

首先我们做一个功能，鼠标点击屏幕，获取坐标

<template>
  <h2>当前鼠标的坐标是：x:{{ point.x }}，y:{{ point.y }}</h2>
</template>

<script>
import {onMounted, onBeforeMount,reactive} from 'vue'

export default {
  name: 'Demo',
  setup() {
    let point = reactive({
      x: 0,
      y: 0
    })

    function savePoint(event) {
      point.x = event.pageX;
      point.y = event.pageY;
    }
    onMounted(() => {
      window.addEventListener("click",savePoint)
    })

    onBeforeMount(()=>{
      window.removeEventListener("click",savePoint)
    })

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

然后改用使用 hooks，在 src 下新建 hooks 文件夹，增加 usePoint.js

import {onBeforeMount, onMounted, reactive} from "vue/dist/vue";

function savePoint() {
    let point = reactive({
        x: 0,
        y: 0
    })

    function savePoint(event) {
        point.x = event.pageX;
        point.y = event.pageY;
    }
    onMounted(() => {
        window.addEventListener("click",savePoint)
    })

    onBeforeMount(()=>{
        window.removeEventListener("click",savePoint)
    })
    return point
}

export default savePoint;

或者简写：

......
export default function() {
    ......
}

在 Demo.vue 中使用

<template>
  <h2>当前鼠标的坐标是：x:{{ point.x }}，y:{{ point.y }}</h2>
</template>

<script>
import usePoint from "@/hooks/usePoint";

export default {
  name: 'Demo',
  setup() {
    let point = usePoint()

    return {
      point
    }
  },
}
</script>