Vue3中实现自定义hook函数自定义hook函数其实本质就是一个函数，把setup函数中使用的composition

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

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

1.创建一个hook函数

1.在src文件夹下新建hooks文件夹，用来存放自定义的hook函数

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，并将它们返回。

2.使用hook函数

新建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，所以通过解构的方式将他们取出。在template结构中，通过div将a的值展示，并通过两个按钮来控制自增自减。

至此，一个自定义的hook函数就完成了并进行了使用。