Vue3自定义hooks

什么是hook

自定义hook函数其实本质就是一个函数，把setup函数中使用的composition API（组合式 API）进行封装，这就类似Vue2中的mixin。

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

创建一个自定义hook

我们创建一个自定义hook函数，并演示它的使用方法。

1.新建一个项目，在src文件夹下新建hooks文件夹

2.在hooks文件夹下创建useCount.ts文件，在文件中写入演示代码

import { ref } from 'vue'

export const useCount = () => {
  const a = ref<number>(0)

  const add = () => a.value++

  const sub = () => a.value--

  return { a, add, sub }
}

在开头我们就说过，hook函数其实本质就是一个函数，所以我们在这里导出useCount函数，通常情况下hook函数都是以use开头的。在这个函数里面，定义了一个变量a，自增函数add，自减函数sub，并将它们返回。

使用自定义hook

在components文件夹下新建Demo.vue组件，并在App.vue中使用，在Demo组件中写入如下演示代码

<template>
  <div>{{ a }}</div>
  <button @click="add">add</button>
  <button @click="sub">sub</button>
</template>

<script setup lang="ts">
import { useCount } from '../hooks/useCount'
const { a, add, sub } = useCount()
</script>

<style></style>

首先导入自定义的useCount hook函数，因为这个函数返回了a, add, sub，所以通过结构的方式将他们取出。在html结构中，通过div将a的值展示，并通过两个按钮来控制自增自减。

当点击add时，a的数值增加

点击sub时，a的数值减小

这就是一个非常简单的自定义hook函数，通过这个加减的例子或许对你理解会有些许帮助。