一、前言

大家好，我是地霊殿__三無，兜兜转转，总算略有空闲，可以静下来学习学习vue3的相关知识了，今天整点hook函数，在学习之余记录一下，加深印象。

二、自定义hook

1、自定义hook是什么

本质上它就是一个函数，有点类似于vue2的mixin技术，都是将代码混入组件中。

2、自定义hook的作用

将重复的逻辑抽离出来，提高代码复用率，在组件里使用hook时，相当于函数里的相关api方法都移入了组件里，让setup的逻辑更加简洁清晰。

3、如何实现自定义hook

vue3提供了组合式api，我们可以用它来实现自定义hook。

3.1 抽离公共代码和逻辑

比如我们需要获取屏幕的宽高，也支持自定义宽高，那就可以将相关的数据和函数抽离出来。

过程如下：

创建hook.js文件，命名随意，我的文件路径是src/hook/hook.js

在这里，我们要做的就是将函数暴露出来，用export即可，然后在函数的内部，撰写我们需要的相关逻辑。

第一个是需要存储宽高的变量，我们用reactive创建一个响应式的point变量；

第二个是创建两个函数，一个用来获取可视化宽高，一个用来自定义宽高；

第三个是把上述的一个变量，两个函数，return出去。

// 引入组合式api
import { reactive } from 'vue'

// 暴露hook函数
export default function () {
  // 数据: 存储宽高
  const point = reactive({
    width: 0,
    height: 0,
    str: ''
  })

  // 函数: 设置宽高
  function setWH (event) {
    point.width = event.width
    point.height = event.height
    point.str = event.str
  }

  // 函数: 设置宽高
  function getWH (event) {
    screen.width = document.documentElement.clientWidth
    screen.height = document.documentElement.clientHeight
    point.str = event.str || '自动获取可视化宽高'
  }

  // 返回数据
  return { point, setWH, getWH }
}

3.2 组件里如何引入和使用

我新建了个demo.vue文件，在里面我们通过import引入了刚刚创建的hook.js文件，并通过解构的方式，将其中的变量剥离出来，这种方式也具有响应式。

使用方式简单，而且代码看上去就清晰明了，这是使用hook带来的好处。

<script setup lang="ts">
import diyhook from '../hook/hook'
const { point, setWH } = diyhook()
</script>
<template>
  <div class="title">
    {{ point.width }}{{ point.str }}
    <div @click="setWH({height: 1, width: 22,str:'值被修改了'})">
      sss
    </div>
  </div>
</template>

4、使用自定义hook需要注意什么

4.1 每个hook函数应该尽量简单

上述我们新建的hook.js文件里，是负责宽高的相关函数，如果有新的需求，比如获取鼠标点击位置等等，虽然也可以写在hook.js文件里，但是长久以来，hook.js这个文件越来越大，失去了原本简洁的样子，维护成本也增高。

最好的做法是，新建一个mouse.js（名称随意）,在这里面撰写获取鼠标位置的相关函数。

4.2 hook函数的生命周期发生了变化

beforeCreate和created被setup代替，不需要撰写。

其余生命周期，都需要加on，并且变成驼峰式。

选项式 API	Hook inside `setup`
`beforeCreate`	Not needed*
`created`	Not needed*
`beforeMount`	`onBeforeMount`
`mounted`	`onMounted`
`beforeUpdate`	`onBeforeUpdate`
`updated`	`onUpdated`
`beforeUnmount`	`onBeforeUnmount`
`unmounted`	`onUnmounted`
`errorCaptured`	`onErrorCaptured`
`renderTracked`	`onRenderTracked`
`renderTriggered`	`onRenderTriggered`

三、小结

hook用得好，代码效率高，我们就有更多的时间摸鱼（x）学习（√）了。

ps：我是地霊殿__三無，希望能一起学习进步。

vue3组合式api---实现自定义hook