广州市天河区住房和建设局网站b站推广2023

本文将介绍如何使用Vue3来封装一些比较有用的组合API，主要包括背景、实现思路以及一些思考。

就我自己的感觉而言，Hook与Composition API概念是很类似的，事实上在React大部分可用的Hook都可以使用Vue3再实现一遍。

为了拼写方便，下文内容均使用Hook代替Composition API。相关代码均放在github[1]上面。

useRequest

背景

使用hook来封装一组数据的操作是很容易的，例如下面的useBook

import {ref, onMounted} from 'vue'function fetchBookList() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([1, 2, 3])
        }, 1000)
    })
}export function useBook() {
    const list = ref([])
    const loading = ref(false)
    const getList = async () => {
        loading.value = true
        const data = await fetchBookList({page: 1})
        loading.value = false
        list.value = data
    }    onMounted(() => {
        getList()
    })    return {
        list,