概念

• 什么是hook?

  • 本质是一个函数，把setup函数中使用的Composition API进行了封装。

  • 类似于vue2.x中的mixin。(但是mixins会组件的配置项覆盖。vue3使用了自定义hooks替代mixnins，hooks本质上是函数，引入调用。)

• 自定义hook的优势:

  • 复用代码, 让setup中的逻辑更清楚易懂。

功能演示

鼠标点击屏幕，获取坐标:

<template><h2>当前鼠标的坐标是：x:{{ point.x }}，y:{{ point.y }}</h2>
</template>
<script>
import {onMounted, onBeforeUnmount,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)})onBeforeUnmount(()=>{window.removeEventListener("click",savePoint)})return {point,}},
}
</script>

然后改用使用 hooks，在 src 下新建 hooks 文件夹，增加 usePoint.js 命名规则通常为：use+xxx.js

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){//实现鼠标“打点”相关的数据let point = reactive({x:0,y:0})//实现鼠标“打点”相关的方法function savePoint(event){point.x = event.pageXpoint.y = event.pageYconsole.log(event.pageX,event.pageY)}//实现鼠标“打点”相关的生命周期钩子onMounted(()=>{window.addEventListener('click',savePoint)})onBeforeUnmount(()=>{window.removeEventListener('click',savePoint)})return point
}

在 Demo.vue 中使用:

<template><h2>当前求和为：{{sum}}</h2><button @click="sum++">点我+1</button><hr><h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template><script>import {ref} from 'vue'import usePoint from '../hooks/usePoint'export default {name: 'Demo',setup(){//数据let sum = ref(0)let point = usePoint()//返回一个对象（常用）return {sum,point}}}
</script>

复用测试

Test.vue

<template><h2>我是Test组件</h2><h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template><script>import usePoint from '../hooks/usePoint'export default {name:'Test',setup(){const point = usePoint()return {point}}}
</script>