今天学习下vue3的自定义hooks，自定义 Hooks 是一种非常灵活的方式来组织和重用组件逻辑。它们本质上就是普通的 JavaScript 函数，可以在组件的 setup() 函数中被调用，并返回响应式状态、函数等给组件使用。我理解的就相当于后端用的类，里面有属性和方法，这个hooks可直接重用，也方便维护。

创建和使用自定义 Hook

1. 定义 Hook：
   在你的项目中创建一个新的 .js 或 .ts 文件，并在其中定义你的 Hook 函数。这个函数可以接收参数，并使用 Vue 的响应式 API（如 ref、reactive、computed 等）来创建和管理状态。

命名需要以useXxx为文件名

2. 使用 Hook：
   在组件的 setup() 函数中导入并使用这个 Hook。将 Hook 的返回值解构并返回给模板或其他组合式 API 使用。

示例

假设我们要创建一个自定义 Hook useCounter，用于管理一个计数器状态。

userCounter.js

import { ref } from 'vue';  
  
export default function useCounter(initialValue = 0) {  
  const count = ref(initialValue);  
  
  function increment() {  
    count.value++;  
  }  
  
  function decrement() {  
    count.value--;  
  }  
  
  // 返回给组件使用的响应式状态和方法  
  return { count, increment, decrement };  
}

上面代码定义了count数据，increment，decrement函数。之后把这些函数和属性return一下。

在组件使用hook

<template>  
  <div>  
    <p>Count: {{ count }}</p>  
    <button @click="increment">Increment</button>  
    <button @click="decrement">Decrement</button>  
  </div>  
</template>  
  
<script>  
import { defineComponent } from 'vue';  
import useCounter from './useCounter';  
  
export default defineComponent({  
  name: 'CounterComponent',  
  setup() {  
    // 调用 Hook 并解构其返回值  
    const { count, increment, decrement } = useCounter(0); // 初始值设为 0  
  
    // 将状态和方法返回给模板  
    return { count, increment, decrement };  
  },  
});  
</script>

上面代码先import导入hook。可直接在setup里面使用const { count, increment, decrement } = useCounter(0);

以上就是hook的简单示例应用了，小伙伴们还可以在实际开发中做更多的应用，这是一个强大的功能，很好用的哦。