vue Hooks

小飞侠在吗2025-12-09 9:49

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>