VueUse使用及造輪子選擇對比示例詳解

更新時間：2022年08月15日 09:09:34 作者：YongGit

這篇文章主要為大家介紹了VueUse使用及造輪子選擇對比示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

?? 前言

想想一名React開發(fā)開發(fā)Vue是什么體驗。就在今天初含淚寫多一個vue項目，不是轉(zhuǎn)，是寫多！選用的是vue3+vite開發(fā)。Composition API 讓我得心應(yīng)手。

之前react開發(fā)選的是react16，ahooks是我接觸最多的hooks庫了，很貼合我的業(yè)務(wù)。在使用vue3的時候開發(fā)的時候選取了 vueuse 。

??‍?? 問題

在前端開發(fā)中和請求打交道是最多的，大多數(shù)業(yè)務(wù)都是restful api架構(gòu)，我們拿到數(shù)據(jù)做處理，當(dāng)前流行的框架配備著狀態(tài)機制，在依賴變化時進(jìn)行重新請求等。 vueuse 中的 useFetch 和 useAxios 是作為請求的 hook。

useFetch功能比較單一，只有請求體的一些基本功能。useAxios 更多基于axios內(nèi)置功能的封裝，業(yè)務(wù)中的依賴刷新，防抖，節(jié)流，緩存等功能都沒有的。

這里就有小伙伴問了，那你在 useAxios上封裝這些節(jié)流防抖功能就好了，先不說需要侵入式的修改這個鉤子，它僅支持axios，萬一項目變成request呢?

??‍♂? 解決

ahooks 是前端界大名鼎鼎的 react 的 hooks，它含有更加豐富的功能，能貼合我們更多的業(yè)務(wù)，其中的 useRequest 是滿足我的需求的，但苦于沒有vue版本，于是我覺得自己開發(fā)一版基于vue3特性的useRequest 。它具備了ahooks的所有功能：

自動請求/手動請求
輪詢
防抖
節(jié)流
屏幕聚焦重新請求
錯誤重試
loading delay
SWR(stale-while-revalidate)
緩存
插件式

const {
 ?loading: Ref<boolean>,
 ?data?: Ref<TData>,
 ?error?: Ref<Error>,
 ?params: Ref<TParams || []>,
 ?run: (...params: TParams) => void,
 ?runAsync: (...params: TParams) => Promise<TData>,
 ?refresh: () => void,
 ?refreshAsync: () => Promise<TData>,
 ?mutate: (data?: TData | ((oldData?: TData) => (TData | undefined))) => void,
 ?cancel: () => void,
} = useRequest<TData, TParams>(
 ?service: (...args: TParams) => Promise<TData>,
  {
 ? ?manual?: boolean,
 ? ?defaultParams?: TParams,
 ? ?onBefore?: (params: TParams) => void,
 ? ?onSuccess?: (data: TData, params: TParams) => void,
 ? ?onError?: (e: Error, params: TParams) => void,
 ? ?onFinally?: (params: TParams, data?: TData, e?: Error) => void,
 ? ?...高級功能，更多請見文檔
  }
);

這個useRequest 請求體允許傳入任意promise對象，所以它并不限制是axios還是request,并且功能都是一致的。

如果想使用請求庫的一些特定功能，我們可以封裝那些特定功能成為useRequest的插件，可以控制在它的生命周期中調(diào)用。

所以它既體現(xiàn)出包容性又體現(xiàn)出對于單個個體特殊功能的接納。

插件化的使用

<template>
  <div>{{ data?.name ?? '-' }}</div>
  <div>{{ data?.age ?? '-' }}</div>
</template>
<script lang="ts" setup>
import { useRequest } from 'vue-hooks-plus'
import { Plugin } from '../../../types'
// 插件
const useFormatter: Plugin<
  {
    name: string
    age: number
  },
  []
> = (fetchInstance, { formatter }) => {
  return {
    onSuccess: () => {
      fetchInstance.setData(formatter(fetchInstance.state.data), 'data')
    },
  }
}
function getUsername(): Promise<{ name: string; age: number }> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: 'yong_git',
        age: 18,
      })
    }, 1000)
  })
}
const { data } = useRequest(
  () => getUsername(),
  {
    formatter: () => {
      return {
        name: 'plugins update',
        age: 20,
      }
    },
  },
  [useFormatter]
)
</script>

上面實現(xiàn)了一個formatter返回結(jié)果的插件，它在請求完成的時候return {name: 'plugins update',age: 20,} 覆蓋了請求的結(jié)果，更多詳情請見文檔。

下面是我基于ahooks實現(xiàn)的vue的hooks庫 vue-hooks-plus，收獲很多，框架的機制所體現(xiàn)出來的獨特性讓人眼前一亮 ??。后續(xù)還會挑重點hooks詳細(xì)講解原理和大家分享。