前言
vue3也用过一段时间了，hooks听说过，但是一直没有用过。公司的前端项目里也没有相应的应用，因此打算系统的学习一下。
hooks与普通函数的区别
以实现一个加法功能为例。
普通函数未抽离
<template><div class="box"><div>sum的值是：{{ sum }}</div><el-button type="primary" @click="add">加1</el-button></div>
</template><script setup lang="ts">
import { ref } from "vue";
const sum = ref(0);const add = () => {sum.value++;
};
</script>
普通函数抽离
<template><div class="box"><div>sum的值是：{{ sum }}</div><el-button type="primary" @click="add">加1</el-button></div>
</template><script setup lang="ts">
import { ref } from "vue";
import { addFn } from "./add.js";
const sum = ref(0);const add = () => {sum.value = addFn(sum.value, 1);
};
</script>
const addFn = (a, b) => {return a + b;
};export { addFn };
hooks
import { ref } from "vue";const useAdd = (num) => {const sum = ref(0);const addFn = () => {sum.value += num;};// 将值和方法返回return {sum,addFn,};
};// 导出hooks
export { useAdd };
<template><div class="box"><div>sum的值是：{{ sum }}</div><el-button type="primary" @click="addFn">加1</el-button></div>
</template><script setup lang="ts">
// 导入hooks
import { useAdd } from "./add.js";
// 初始化
const { sum, addFn } = useAdd(1);
</script>
如上图，效果是一样的。也可以看出，当业务逻辑都是抽离出来时，hooks 比单独抽离出一个公共方法好一点。
但是封装成 hooks 一定是可以复用的逻辑，这样才有意义。但是什么情况应该封装成hooks，什么时候封装成普通函数呢？看了不少文章，没看到有什么明确的解释。
可能是hooks 听起来比函数更高级吧。当然可能是自己太菜了，没有理解，如果有大佬用的比较多，麻烦解释一下，对这块一直很疑惑，万分感谢。
基本使用
关于hooks 的定义，好像有两种方式。一种是文件名以use开头，另一种就是函数以use开头，也就是上面这种。我个人的话，比较喜欢函数以use开头。
hooks 与普通函数的区别可能就在于使用了vue的相关api。基本做法都是在函数里通过return将响应式变量，以及操作这个响应式变量的函数给返回，方便外部使用。
