vue3hooks的使用

在 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>