背景
在前端代码的开发中，常会出现多个模块具有相同的逻辑（或者功能点）。为了提高代码的复用率，可以将相同的逻辑代码进行抽离。Vue2采用mixin混入的形式，Vue3可以使用hooks来处理。
hooks与minxin比较
-
Vue Hooks：
- 与React Hooks类似，Vue 3引入了Composition API，提供了类似于Hooks的功能，可以让你在Vue组件中更灵活地组织和复用代码。
- Composition API基于函数式编程，允许将相关逻辑封装到可复用的函数中，并在组件中按需调用，从而提高代码的可维护性和可读性。
- 使用Composition API可以更好地组织代码逻辑，避免了Vue 2中Mixins可能导致的命名冲突和依赖关系复杂的问题。
-
Vue Mixins：
- Vue Mixins是一种在Vue中实现代码复用的方式，通过将一些选项混入到组件中来实现共享逻辑。
- Mixins可以包含组件中的data、methods、生命周期钩子等，但过多的使用Mixins可能导致组件之间的耦合度增加，使代码难以维护和理解。
- Vue官方推荐在使用Mixins时要小心谨慎，避免过度使用，以免造成代码的混乱和不可预测性。
总的来说，Vue Hooks（Composition API）和Vue Mixins都是用于实现代码复用的方式，但Composition API更加灵活和强大，在Vue 3中被推荐作为首选的代码组织方式，而Mixins在Vue中仍然可以使用，但需要注意避免滥用，以免出现代码维护上的问题。
使用
以展示某个数据为例。
1.建立hooks文件，在src目录下新建hooks文件夹，用于存放项目中使用的hooks。在hooks文件夹下新建useCount.ts,注意：hooks的文件必须以use开头。代码如下：
import { ref } from 'vue'export function useCount () { const count = ref<number>(0) // 增加count const addCount = () => { count.value++ } const subCount = () => { count.value-- } return { count, addCount, subCount, }}
2.在调用的组件中进行使用。
<template> <div> <span>{{ count }}</span> <el-button @click="addCount">加1</el-button> <el-button @click="subCount">减1</el-button> </div></template><script lang='ts' setup>import { useCount } from '@/hooks/useCount'const { count, addCount, subCount } = useCount()</script>
总结
Vue3的hooks，其实就是函数。提高了代码的复用率，实现高内聚低耦合的目标。本篇文章是笔者的在工作中使用hooks的一些心得，如有不正确的地方，请大家纠正。
