vue Hooks

Vue Hooks是Vue3基于‌Composition API实现的逻辑复用方案，通过函数式封装解决代码复用与组织难题‌。

Vue Hooks的核心作用

• ‌逻辑复用‌：替代Vue2的‌Mixin方案，避免命名冲突（如多个Mixin的data/methods同名覆盖问题），通过usePagination等函数显式暴露状态与方法。‌‌
• ‌代码聚合‌：将与同一功能相关的‌响应式变量、‌计算属性、生命周期逻辑整合到单一Hook中（如分页功能包含页码控制、加载状态、请求触发）。‌‌
• ‌类型支持优化‌：配合‌TypeScript时，函数参数与返回值类型推导更精准，提升代码可维护性。‌‌
• 自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。

使用方式与规范

• ‌命名规则‌：以use开头的驼峰命名（如useFetch）。‌‌

• ‌代码组织‌：在src/hooks目录存放复用逻辑，组件中通过import { useXxx } from '@/hooks'调用。‌‌

• 让一个功能的数据和方法合在一起，把模块化开发发挥到极致，类似vue2的mixin

• 示例代码：

  import {ref,onMounted} from 'vue'

  export default function(){
  let sum = ref(0)

  const increment = ()=>{
    sum.value += 1
  }
  const decrement = ()=>{
    sum.value -= 1
  }
  onMounted(()=>{
    increment()
  })
  
  //向外部暴露数据
  return {sum,increment,decrement}

  }

组件中具体使用：

<template>
  <h1> 数字：{{ sumData.sum }}</h1>
  <button @click="sumData.increment">点我+1</button>
</template>
 
<script setup lang="ts">
import useSum  from './hooks/useSum'
// 调用useSum函数获取返回的响应式数据
const sumData = useSum()
</script>
 
<style scoped>

</style>