【Vue 3】如何封装一个超级好用的 Hook！

已于 2024-07-03 10:01:47 修改
阅读量577 收藏 5
点赞数 10
分类专栏： # Vuejs 文章标签： vue.js javascript 前端
于 2024-07-01 16:45:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SWQ4520/article/details/140104973
版权

图片

大家好，我是CodeQi！ 

在 Vue 3 中，组合式 API 的出现给我们带来了很多新的编程方式和思路。

其中，Hook 是一种非常强大的工具，可以帮助我们更好地复用代码，提升开发效率。

在这篇文章中，我将详细介绍什么是 Hook，以及如何在 Vue 3 中封装一个超级好用的 Hook。

我们将通过多个实例，逐步深入探讨 Hook 的封装技巧和使用场景。

什么是 Hook

Hook 是一种将逻辑复用的方式，可以帮助我们将组件中的逻辑提取出来，形成独立的函数。

在 Vue 3 中，Hook 通常是指使用 setup 函数中的组合式 API 封装的逻辑函数。

通过 Hook，我们可以在多个组件中复用相同的逻辑，而不需要重复编写代码。

在 Vue 中使用 Hook

在 Vue 3 中，使用 Hook 非常简单。

我们可以通过在 setup 函数中定义一个函数，然后在需要的地方调用这个函数来实现逻辑复用。

下面是一个简单的示例：

<!-- src/components/ExampleComponent.vue -->
<template>
  <div class="example">
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup>
import { ref }from'vue'

functionuseExample(){
const message =ref('Hello, Vue 3 Hook!')
return{ message }
}

const{ message }=useExample()
</script>

<style scoped>
.example {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

封装表格 Hook

我们经常需要在多个地方使用表格组件，并且每个表格都有类似的逻辑，比如数据获取、分页、排序等。

为了避免代码重复，我们可以封装一个表格 Hook 来复用这些逻辑。

如何封装

首先，我们创建一个名为 useTable.js 的文件：

// src/hooks/useTable.js
import{ ref }from'vue'
import axios from'axios'

exportfunctionuseTable(url){
const data =ref([])
const loading =ref(false)
const currentPage =ref(1)
const total =ref(0)

constfetchData=async()=>{
    loading.value=true
try{
const response =await axios.get(url,{
params:{
page: currentPage.value,
},
})
      data.value= response.data.items
      total.value= response.data.total
}catch(error){
console.error('Error fetching data:', error)
}finally{
      loading.value=false
}
}

fetchData()

return{ data, loading, currentPage, total, fetchData }
}

然后，我们在组件中使用这个 Hook：

<!-- src/components/TableComponent.vue -->
<template>
<div class="table-component">
<table v-if="!loading">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
<p v-else>Loading...</p>
<button @click="prevPage" :disabled="currentPage === 1">Previous</button>
<button @click="nextPage" :disabled="currentPage === total">Next</button>
</div>
</template>

<script setup>
import { ref }from'vue'
import{ useTable }from'../hooks/useTable'

const url ='https://api.example.com/data'
const{ data, loading, currentPage, total, fetchData }=useTable(url)

constprevPage=()=>{
if(currentPage.value>1){
    currentPage.value--
fetchData()
}
}

constnextPage=()=>{
if(currentPage.value< total.value){
    currentPage.value++
fetchData()
}
}
</script>

<style scoped>
.table-component {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

封装 Hook 时，返回值的设计非常重要。

我们应该返回足够的信息和方法，使得使用 Hook 的组件能够完全控制和使用 Hook 的功能。

在上面的例子中，我们返回了数据、加载状态、当前页码、总页数和一个获取数据的方法。

添加分页查询

有时候，我们需要在表格中支持分页查询。

我们可以在 Hook 中加入分页查询的逻辑，并通过传参控制分页查询的行为。

如何封装

我们在 useTable.js 文件中修改 useTable 函数，加入分页查询的支持：

// src/hooks/useTable.js
import{ ref }from'vue'
import axios from'axios'

exportfunctionuseTable(url, initialParams = {}){
const data =ref([])
const loading =ref(false)
const currentPage =ref(1)
const total =ref(0)
const params =ref(initialParams)

constfetchData=async()=>{
    loading.value=true
try{
const response =await axios.get(url,{
params:{
page: currentPage.value,
...params.value,
},
})
      data.value= response.data.items
      total.value= response.data.total
}catch(error){
console.error('Error fetching data:', error)
}finally{
      loading.value=false
}
}

fetchData()

return{ data, loading, currentPage, total, params, fetchData }
}

在组件中，我们可以传递初始参数，并在查询时修改参数：

<!-- src/components/TableComponent.vue -->
<template>
<div class="table-component">
<input v-model="query" placeholder="Search..." />
<button @click="search">Search</button>
<table v-if="!loading">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
<p v-else>Loading...</p>
<button @click="prevPage" :disabled="currentPage === 1">Previous</button>
<button @click="nextPage" :disabled="currentPage === total">Next</button>
</div>
</template>

<script setup>
import { ref }from'vue'
import{ useTable }from'../hooks/useTable'

const url ='https://api.example.com/data'
const{ data, loading, currentPage, total, params, fetchData }=useTable(url)

const query =ref('')

constsearch=()=>{
  params.value.query= query.value
fetchData()
}

constprevPage=()=>{
if(currentPage.value>1){
    currentPage.value--
fetchData()
}
}

constnextPage=()=>{
if(currentPage.value< total.value){
    currentPage.value++
fetchData()
}
}
</script>

<style scoped>
.table-component {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

支持不同接口字段

有时候，不同的 API 返回的数据格式可能不同。

我们需要在 Hook 中处理这些不同的字段，以便能够兼容不同的接口。

如何封装

我们在 useTable.js 文件中修改 useTable 函数，加入字段映射的支持：

// src/hooks/useTable.js
import{ ref }from'vue'
import axios from'axios'

exportfunctionuseTable(url, fieldMap = {}, initialParams = {}){
const data =ref([])
const loading =ref(false)
const currentPage =ref(1)
const total =ref(0)
const params =ref(initialParams)

constfetchData=async()=>{
    loading.value=true
try{
const response =await axios.get(url,{
params:{
page: currentPage.value,
...params.value,
},
})
      data.value= response.data[fieldMap.items||'items']
      total.value= response.data[fieldMap.total||'total']
}catch(error){
console.error('Error fetching data:', error)
}finally{
      loading.value=false
}
}

fetchData()

return{ data, loading, currentPage, total, params, fetchData }
}

在组件中，我们可以传递字段映射：

<!-- src/components/TableComponent.vue -->
<template>
<div class="table-component">
<input v-model="query" placeholder="Search..." />
<button @click

="search">Search</button>
<table v-if="!loading">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
<p v-else>Loading...</p>
<button @click="prevPage" :disabled="currentPage === 1">Previous</button>
<button @click="nextPage" :disabled="currentPage === total">Next</button>
</div>
</template>

<script setup>
import { ref }from'vue'
import{ useTable }from'../hooks/useTable'

const url ='https://api.example.com/data'
const fieldMap ={
items:'results',
total:'total_count',
}
const{ data, loading, currentPage, total, params, fetchData }=useTable(url, fieldMap)

const query =ref('')

constsearch=()=>{
  params.value.query= query.value
fetchData()
}

constprevPage=()=>{
if(currentPage.value>1){
    currentPage.value--
fetchData()
}
}

constnextPage=()=>{
if(currentPage.value< total.value){
    currentPage.value++
fetchData()
}
}
</script>

<style scoped>
.table-component {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

总结

以上便是我对如何在 Vue 3 项目中封装一个超级好用的 Hook 的一些心得与体会。

希望能够帮助到正在学习和使用 Vue 3 的你。如果有任何疑问或建议，欢迎与我交流。

祝你编码愉快！Happy coding!

关注我，原创文章第一时间推送， 点赞和收藏就是最大的支持❤️

Vue3电影中后台开发纪实（九）：项目简历与面试
欧阳桫的技术博客
12-17 1932
刀锋电影管理端是刀锋电影App与刀锋电影小程序的中后台管理端程序；包含用户管理、数据看板、在映影片管理、预告管理、城市管理、影院管理、订单管理、运营管理、售后客服等模块；运营人员通过该系统可以创建与维护系统用户、管理用户权限、发布影片与影院信息、创建运营活动、跟踪用户订单、提供售后服务等；
vue框架使用
qq_45645848的博客
01-11 1411
前端vue基础知识总结，汇总
Vue.js 学习总结（11）—— Vue3 Hook 函数实战总结
科技D人生
10-27 1911
在 Vue 3 中，Hook 函数是一种特殊的函数，用于封装可重用的逻辑和状态管理。Hook 函数允许你在 Vue 组件中提取和复用逻辑，而不是将所有逻辑都放在组件的选项对象中。它们可以帮助你更好地组织代码，提高代码的可维护性和可测试性。Hook 函数的特点：可重用性：Hook 函数可以在多个组件中重复使用，避免了重复编写相同的逻辑。逻辑封装：将特定的逻辑封装在 Hook 函数中，使组件的代码更加清晰和易于理解。状态管理：Hook 函数可以用于管理组件的状态，包括响应式数据和副作用。
Vue3 自定义Hooks完全指南
m0_37778704的博客
01-18 2184
在Vue3发布后,Composition API作为一个重要的特性,彻底改变了我们组织Vue组件代码的方式。其中,自定义Hooks的概念源自React,但Vue3对其进行了重新设计和优化,使其更加符合Vue的开发理念。本文将深入探讨Vue3中的自定义Hooks,帮助你掌握这个强大的代码复用工具。Hooks是一种特殊的函数,它可以让你在函数组件中使用状态和其他Vue特性。以"use"作为函数名称前缀返回一个包含响应式数据或方法的对象,可以使用其他Hooks,遵循组合式函数的设计模式代码组织。
Vue3的Hook指南
qq_74114417的博客
03-07 1336
Hook是包含响应式状态和逻辑组合的函数。使用创建响应式状态包含等响应式操作可以调用生命周期钩子返回可复用的状态和方法集合注意： Vue官方文档中并没有直接称为“hook”，而是使用“组合式函数”（Composable）这个术语。组合式函数的作用是封装和复用有状态的逻辑，类似于React Hooks，但实现方式不同。Hook模式将前端开发带入逻辑即服务原子化：每个Hook都是独立的功能单元可组合：通过函数组合实现复杂功能可测试：脱离 UI 实现纯逻辑验证类型化。
【Vue3】如何封装一个超级好用的 Hook ！
05-06 2575
Vue3 官方文档是这样定义组合式函数的。A "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.，一个利用 Vue 的组合式 API 来封装和复用具有状态逻辑的函数。 这个概念借鉴自 React 的 Hook。在 16.8 的版本中，React 引入了 React Hook。这是一项特别强大的技术，通过封装有状态的函数，极大提高了组件的编写效率和维
vue3hook
m0_62487693的博客
03-06 606
把自己的问题抛给别人======>别人会给你一个思路------->怎么把他的思路实现------------>第一个hooks（封装）## useRequest 提供了以下几个生命周期配置项，供你在异步函数的不同阶段做一些处理。* 问自己：这个效果或者功能能不能抽离成一个独立的功能？onSuccess：请求成功触发。onFinally：请求完成触发。onBefore：请求之前触发。- 2.以`use`开头的函数。- 发送请求 自动/手动。main.js 代码。- 1.抽离公共功能。
vue3 的 hook
qq_46302247的博客
06-21 342
vue3的hook类似于vue2的Mixin（混入）
vue3-Hook
Wu_whiteHyacinth的博客
11-02 4963
vue3-hook
vue3封装Hooks实现更好的逻辑复用
qq_62401119的博客
04-08 2038
在构建前端应用中，经常会需要复用公共任务的逻辑。例如在一个管理后台中会存在很多的表格，其中的增删查改的内容就是可复用的部分，我们在写页面的过程中如果不封装的话会发现我们经常复制/粘贴。在Vue3的Composition API中引入了Hooks的概念，为我们提供了更灵活和可组合的代码组织方式。其中的一个重要概念就是Hooks。Hooks是一种函数，以use开头，用于封装一些可复用的逻辑。
基于AIOHTTP、Websocket和Vue3一步步实现web部署平台，无延迟控制台输出，接近原生SSH连接
wybaby168的博客
02-12 1289
背景：笔者是一名Javaer，但是最近迷上了Python和它的Asyncio，于是乎也接触到了一些高并发高性能的组件，通过简单的学习和了解，aiohttp这个组件引起了我极大的兴趣。 协程、异步非阻塞、吓人的性能，这些关键词让我不得不注意到它。 ......
Vue组件通信(相互传值)
laoli360的博客
09-26 332
组件通信-父向子-props 在实际工作中,不可能每个组件的值都是一样的,这时候就需要学会组件通信,互相传值 因为每个组件的变量和值都是独立的 组件通信先暂时关注父传子, 子传父 父: 使用其他组件的vue文件 子: 被引入的组件(嵌入) 例如: App.vue(父) MyProduct.vue(子) 封装一个商品组件MyProduct.vue - 外部传入具体要显示的数据, 如下图所示 components/MyProduct.vue - 准备标签 <template&.
Vue3中的hook
jieyucx的博客
07-11 8424
Vue3中的hook通常被称为，是Vue.js框架中的一个重要特性。它们的是一些可以在，这些函数能够让你在不影响组件逻辑的情况下，增强和扩展组件的功能。Hook的是。举个例子，如果你有一个处理异步请求和管理请求状态的功能，那么你可能会在多个组件中需要这个功能。在Vue2.x中，你可能需要使用mixins或者HOC（高阶组件）来抽象和重用这些逻辑，但这通常会导致命名冲突和逻辑混乱。而使用Vue3中的或者说，就无需担心上述问题。你可以通过调用useFetch这样的自定义hook。
VueUse：Vue 3 开发中的强大 Hooks 库
热门推荐
lotte
06-19 1万+
基于 Vue 3 Composition API 的高质量 Hooks 库
Vue3 自定义Hooks函数的封装
weixin_48420104的博客
05-31 1621
在Vue 3中，自定义hooks允许开发者封装和重用逻辑代码。自定义hooks是使用Composition API时创建的函数，这些函数可以包含任意的组合逻辑，并且可以在多个组件之间共享。自定义hooks通常遵循这样的命名约定：以use开头，后面跟上hook的名称，这样做可以清晰地表明它是一个自定义的hooks。01、具备可复用功能，才需要抽离为 hooks 独立文件02、函数名/文件名以 use 开头，形如: useXX03、引用时将响应式变量或者方法显式解构暴露出来；
vue3——hooks
weixin_45233925的博客
08-24 1643
hook
Vue3 自定义hooks 大集合 你要的自定义hooks 都在这，快来看吧！
前端开发博客
02-28 1275
大家好，我是宝哥。转载一篇详解Vue3 自定义hooks的文章。正文不知道喜欢 vue3 的小伙伴和我是不是一样，刚上手vue3 的时候 对自定义hooks 一脸懵逼，在一些视频网站学习的时候老师讲解到自定义hooks 最喜欢用 加减乘除来描述 自定义hooks 是咋用的，可能是我理解能力比较差吧，我看了这个 加减乘除的自定义hooks 之后感觉跟没看一样，还是一脸懵逼，所以个人觉得这种知识还是结...
【Vue3】hooks
票票的博客
09-12 423
Vue3：hooks
vue3 hook
最新发布
03-19
<think>好的，我现在需要帮助用户了解Vue3中的Hook使用方法或实现。首先，用户可能已经熟悉Vue2，或者是从React的Hooks转过来的，所以需要先解释Vue3中Hook的概念，和React的区别。根据提供的引用，尤其是引用[2]提到React的Hooks需要以use开头，并且可以调用其他Hooks，这可能和Vue3中的Composition API类似。 接下来，我需要明确Vue3中的Hook通常指的是使用Composition API封装的可复用逻辑。Vue3的setup函数是关键，它允许将逻辑组织成更小的函数，类似于Hooks。需要举例说明如何创建自定义Hook，比如一个计数器或数据获取的Hook。 然后，用户可能需要具体的代码示例。例如，如何创建一个useCounter的Hook，并在组件中使用它。还需要提到生命周期钩子的使用，比如onMounted，onUnmounted等，这些在Vue3的Composition API中是如何集成的。 此外，用户可能关心与第三方库的集成，比如引用[3]中的工具提示库，可能需要展示如何在Hook中封装这些功能，提高可复用性。比如使用vueuse/core这样的社区库，或者自己封装一个useTooltip的Hook。 还要注意对比Vue2和Vue3的区别，如引用[1]提到的迁移准备，可能需要提到使用Hooks来替代mixins，因为mixins在Vue3中不再推荐使用。Composition API提供了更好的代码组织和复用方式。 最后，生成的相关问题需要涵盖Hook的优势、与React的区别、生命周期处理、与第三方库集成，以及替代Vue2的mixins的方法。这些问题能帮助用户深入理解Hooks在Vue3中的应用。</think>### Vue3 中的 Hook 使用方法及实现 Vue3 的 **Hook** 本质是通过 **Composition API** 封装可复用的逻辑模块，类似于 React 的 Hooks，但实现方式不同。以下是关键步骤和示例： --- #### 1. **Hook 的核心：`setup` 函数** Vue3 组件使用 `setup` 函数作为逻辑入口，在此定义响应式数据和方法，并返回给模板使用。 ```javascript import { ref } from &#39;vue&#39;; export default { setup() { const count = ref(0); const increment = () => count.value++; return { count, increment }; } } ``` --- #### 2. **自定义 Hook 的实现** 自定义 Hook 是一个普通函数，内部使用 Composition API（如 `ref`, `reactive`, `watch` 等）封装逻辑，并以 `useXxx` 命名以提高可读性。 **示例：计数器 Hook** ```javascript // useCounter.js import { ref } from &#39;vue&#39;; export function useCounter(initialValue = 0) { const count = ref(initialValue); const increment = () => count.value++; const decrement = () => count.value--; return { count, increment, decrement }; } ``` **组件中使用：** ```javascript import { useCounter } from &#39;./useCounter&#39;; export default { setup() { const { count, increment } = useCounter(10); return { count, increment }; } } ``` --- #### 3. **生命周期钩子的集成** 在 Hook 中可直接调用生命周期函数（如 `onMounted`, `onUnmounted`）： ```javascript // useFetch.js import { ref, onMounted } from &#39;vue&#39;; export function useFetch(url) { const data = ref(null); const error = ref(null); onMounted(async () => { try { const response = await fetch(url); data.value = await response.json(); } catch (err) { error.value = err; } }); return { data, error }; } ``` --- #### 4. **与第三方库的集成** 例如，结合 `vueuse` 社区库或工具提示组件（参考引用[3]的 Popover 方案）： ```javascript // useTooltip.js import { inject } from &#39;vue&#39;; export function useTooltip() { const tooltip = inject(&#39;tooltip&#39;); // 假设已通过 provide 注入 const showTooltip = (text) => tooltip.show(text); return { showTooltip }; } ``` --- #### 5. **优势对比** - **替代 Mixins**：Hooks 通过显式函数调用避免命名冲突（Vue2 的 Mixins 易导致隐式耦合）[^1]。 - **逻辑复用**：将数据、方法、副作用集中管理，便于跨组件共享。 - **类型支持**：配合 TypeScript 更友好。 --- §§ 1. Vue3 的 Hook 和 React Hooks 有哪些核心区别？ 2. 如何在自定义 Hook 中处理异步操作（如 API 请求）？ 3. Vue3 的 `setup` 函数和生命周期钩子如何配合使用？ 4. 如何用 Hook 封装第三方库（如图表、动画）的逻辑？ 5. Vue3 的 Composition API 如何替代 Vue2 的 Mixins 模式？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodeQi技术小栈

喝杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值