Vue3 自定义Hooks函数的封装

1、如何理解vue3中的自定义hooks

在Vue 3中，自定义hooks允许开发者封装和重用逻辑代码。自定义hooks是使用Composition API时创建的函数，这些函数可以包含任意的组合逻辑，并且可以在多个组件之间共享。

自定义hooks通常遵循这样的命名约定：以 use 开头，后面跟上hook的名称，这样做可以清晰地表明它是一个自定义的hooks。

2、hooks与utils的区别

相同点：

        通过 hooks 和 utils 函数封装， 可以实现组件间共享和复用，提高代码的可重用性和可维护性。

不同点：  

        01.表现形式不同： hooks 是在 utils 的基础上再包一层组件级别的东西(钩子函数等)；utils 一般用于封装相应的逻辑函数，没有组件的东西；

        02.数据是否具有响应式： hooks 中如果涉及到 ref，reactive，computed 这些 api 的数据，是具有响应式的；而 utils 只是单纯提取公共方法就不具备响应式；

        03.作用范围不同： hooks 封装，可以将组件的状态和生命周期方法提取出来，并在多个组件之间共享和重用；utils 通常是指一些辅助函数或工具方法，用于实现一些常见的操作或提供特定功能。

 3、自定义hooks封装规范：

        01、具备可复用功能，才需要抽离为 hooks 独立文件

        02、函数名/文件名以 use 开头，形如: useXX

        03、引用时将响应式变量或者方法显式解构暴露出来；

4、创建自定义hooks

创建自定义hooks非常简单，你只需要定义一个函数，这个函数内部可以包含你需要重用的任何逻辑：

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  // 返回一个对象，包含响应式状态和函数
  return { count, increment, decrement };
}

5、使用自定义hooks

在组件中使用自定义hooks就像使用Vue提供的内置hooks一样：

<template>
  <div>
    <button @click="decrement">-</button>
    <span>{
  
  { count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
  import { useCounte