vue3中的hook函数

函数"/>

vue3中的hook函数

一、什么是hook

 hook本质是一个函数，把setup函数中使用的Composition API（组合式API）进行了封装，类似于vue中的mixin。

自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂。

我们用获取当前鼠标的坐标这个例子来说明：

二、未封装hook前的代码

<template><div><h3>当前鼠标的坐标为：x:{{ point.x }},y:{{ point.y }}</h3></div></template><script>
import { onBeforeUnmount, onMounted, reactive } from 'vue';export default {setup() {let point = reactive({x: 0,y: 0})function savePoint(e) {point.x = e.pageXpoint.y = e.pageYconsole.log(point.x, point.y);}onMounted(() => {window.addEventListener('click', savePoint)})onBeforeUnmount(() => {window.removeEventListener('click', savePoint)})return {point}}
}
</script>

三、封装后的代码

（1）组件中（PointView.vue）

<template><div><h3>当前鼠标的坐标为：x:{{ point.x }},y:{{ point.y }}</h3></div></template><script>
import usePoint from "@/hooks/usePoint";
export default {setup() {const point = usePoint()return {point}}
}
</script>

（2）hook中（usePoint.js）

import { onBeforeUnmount, onMounted, reactive } from 'vue';
// 获取鼠标当前坐标
export default function() {// 数据let point = reactive({x: 0,y: 0})// 方法function savePoint(e) {point.x = e.pageXpoint.y = e.pageYconsole.log(point.x, point.y);}onMounted(() => {window.addEventListener('click', savePoint)})onBeforeUnmount(() => {window.removeEventListener('click', savePoint)})// 返回值return point
}