Vue3 Hooks 探索

背景

众所周知 Vue3 的时代已来临, Vue3中推荐使用组合式Api, 也就是由之前的类编程转换为函数式编程，逻辑转移到setup语法糖中，由setup作为组合式API的入口点。作为函数式编程Hooks是必不可少的，因为笔者之前一直使用React，在React中 AHooks 是封装的较为全面且实用的hooks库，但是到了Vue3中一直没有找到合适的库，后来决定自己写一套Hooks库，也就是有了 V3Hooks 这个库, 接下来会拿出几个Hook来做介绍,如果这对你有帮助的话，可以给一个Star支持。

使用

接下来我们看几个常用的Hook使用

useRequest

useRequest是用于管理异步请求的Hook，针对于需求中常见的请求发起方式进行封装，加速你的日常开发，他具有以下功能：

• 自动请求/手动请求
• SWR(stale-while-revalidate)
• 缓存/预加载
• 屏幕聚焦重新请求
• 轮询
• 防抖
• 节流
• 依赖请求
• 突变
• loading delay

请求发起方式

如果service是object,useRequest会使用 Fetch 来发送网络请求

import { useRequest } from 'v3hooks';
const { data } = useRequest(
    {
    url: 'http://xxx.xx.com/api/userInfo',
    method: 'POST'
    }
);

如果service是async函数,useRequest会调用此函数来发送网络请求

import { useRequest } from 'v3hooks';
const { data } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
);

基础请求

import { useRequest } from 'v3hooks';
const { data, loading } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
);
watchEffect(()=>{
    console.log( data?.value );
})

在这个例子中， useRequest 接收了一个异步函数 ，在组件初次加载时， 自动触发该函数执行。同时 useRequest 会自动管理异步请求的 loading , data 状态。你可以通过data和loading来实现你的需求

因为返回的data为响应式，js中获取data.value需要在watchEffect中使用，而在template中使用是不需要的。

手动触发

const { data, run, loading } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
    {
        manual: true
    }
);

通过设置 options.manual = true , 则需要手动调用 run 时才会触发执行异步函数。

轮询

const { data, loading } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
    {
        pollingInterval: 1000
    }
);

通过设置 options.pollingInterval ，进入轮询模式，定时触发函数执行。

依赖请求

import { onMounted, ref } from 'vue'

const isReady = ref(false);
const { data, loading } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
    {
        ready: isReady
    }
);
onMounted(() => {
    isReady.value = true;
})

只有当 options.ready 变为 true 时, 才会发起请求，基于该特性可以实现串行请求，依赖请求等。

防抖

const { data, loading } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
    {
        debounceInterval: 1000
    }
);

通过设置 options.debounceInterval ，则进入防抖模式。此时如果频繁触发 run ，则会以防抖策略进行请求。

节流

const { data, loading } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
    {
        throttleInterval: 1000
    }
);

通过设置 options.throttleInterval ，则进入节流模式。此时如果频繁触发 run ，则会以节流策略进行请求。

缓存 & SWR

const { data, loading } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
    {
        caccacheKey: 'mock1'
    }
);

如果设置了 options.cacheKey ， useRequest 会将当前请求结束数据缓存起来。下次组件初始化时，如果有缓存数据，我们会优先返回缓存数据，然后在背后发送新请求，也就是 SWR 的能力。你可以通过 cacheTime 设置缓存数据回收时间，也可以通过 staleTime 设置数据保持新鲜时间。

预加载

const { data, loading } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
    {
        caccacheKey: 'mock1'
    }
);

同一个 cacheKey 的请求，是全局共享的，也就是你可以提前请求数据。后续请求会提前返回之前预加载的数据，利用该特性，可以很方便的实现预加载。

屏幕聚焦重新请求

const { data, loading } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
    {
        refreshOnWindowFocus: true,
        focusTimespan: 2000
    }
);

如果你设置了 options.refreshOnWindowFocus = true ，则在浏览器窗口 refocus 和 revisible 时，会重新发起请求。你可以通过设置 options.focusTimespan 来设置请求间隔，默认无 。

突变

const { data, mutate } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    }
);

 mutate({code:'1',msg:'test'})}>
    突变测试

你可以通过 mutate ，直接修改 data.

Loading Delay

const { data, loading } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
    {
        loadingDelay: 300
    }
);

通过设置 options.loadingDelay ，可以延迟 loading 变成 true 的时间，有效防止闪烁。

refreshDeps

开发中会经常碰到这个需求，当某些 state 变化时，我们需要重新执行异步请求，使用useRequest将很方便的实现此功能。

import { onMounted, ref } from 'vue'

const random = ref(1);
const { data, loading } = useRequest(
    () => {
        return axios.post(
            `http://xxx.xx.com/api/userInfo`
        );
    },
    {
        refreshDeps: [ random ]
    }
);

setInterval(()=>{
    random.value = Math.random()
},1000)

当例子中 random 发生变化时,会重新执行 service。

useVirtualList

长列表虚拟化列表的 Hook，用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。

基础使用

useVirtualList接受一个数组，导出一个虚拟化的list以元素配置，具体配置看Api

useTextSelection

实时获取用户当前选取的文本内容及位置的hook。

useTextSelection接受一个HTMLElement, 导出已选择的文本和位置信息。

基础使用

没有传值默认为document， 页面上可选择的文本都会被计算

监听特定区域文本选择

传值为Ref的P标签，只会监听特定区域。

useQRCode

一个用来生成二维码的 Hook 。

基础使用

usQRCide可以接受一个静态url，也可以是一个被Ref包裹的url，当Ref值发生变化时，二维码会跟随内容进行变化。

useNetwork

一个用来获取当前网络状态的 Hook 。

基础使用

useNetwork返回网络状态信息

结尾

以上拿出了几个Hooks来给大家演示，V3Hooks中还有很多实用Hooks来供大家使用，具体使用可以查看文档，附上 GitHub链接，希望这对你有用。