为什么要使用Hooks？

1. 组件复用性更强：通过Hooks可以使得组件的一些逻辑可以更好地进行封装和复用

2. 更好的逻辑分离。Hooks有助于组件内的业务逻辑更加清晰明了，从而减少代码耦合度。

3. 更高的代码可读性。使用Hooks使得函数组件的可读性更高，在保证性能和灵活性的情况下，增加了代码的可读性。

 一、使用hooks

在当前组件或根组件下新建一个hooks文件夹，用来存放相关文件

1.文件内容

import { reactive, ref } from 'vue'
export default function(){let sum = ref(0)function addSum(){sum.value++}// 向外部返回内容return {sum,addSum}
}

2.组件中使用hooks

<template><div class=""><p>当前值为：{{ sum }}</p><button @click="addSum">sum++</button></div>
</template><script setup lang="ts">
import useSum from "@/hooks/useSum";
// 数据相关
const {sum,addSum} = useSum()</script>
<style lang="scss" scoped>
.width-100{width: 100px;
}
</style>