在 Vue 3 中，hooks 是用于封装组件逻辑的方法，类似于 Vue 2 中的 mixins。

使用 Hooks 可以提高代码的可维护性、可读性、可复用性和可测试性，降低代码之间的耦合度，使得组件的状态更加可控和可预测。

要使用 hooks，你需要先创建一个 hook 文件夹，并在其中定义一系列以 "use" 开头的方法。这些方法可以提供组件的复用和状态管理等开发能力。

下面是一个简单的例子，展示了如何使用 hooks：

1. 在你的项目目录下创建一个新的文件，例如 useSum.ts。

2. 

3. 在useSum.ts中

4. import { ref } from 'vue'export default function () {let sum = ref(1000)function add() {sum.value += 1000}return { sum, add }
   }

5. 在你的组件中，使用这个 hook：

6. <template><div class="content">{{ sum }}<button @click="add">+1000</button></div>
   </template><script lang="ts" setup>import useSum from '@/hooks/useSum'const {sum ,add } = useSum()</script>