background

Vue3 is known to have come of age, and Vue3 recommends the use of composite apis, that is, switching from class programming to functional programming, logic to setup syntax sugar, and setup as the entry point to the composite Api. In React, AHooks are the comprehensive and useful Hooks library, but I couldn’t find one in Vue3, so I decided to write a set of Hooks libraries. With the V3Hooks library in place, we’ll introduce a few hooks, and if that helps you get a Star support.

use

Let’s look at some common Hook uses

useRequest

UseRequest is a Hook for managing asynchronous requests. It encapsulates common request initiation methods in requirements and speeds up your daily development with the following features:

Automatic request/manual request
SWR(stale-while-revalidate)
Cache/preload
Screen focus rerequested
polling
Image stabilization
The throttle
Rely on request
mutation
loading delay

Request Initiation Mode

If the Service is object,useRequest will use Fetch to send network requests

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

If service is async,useRequest calls this function to send network requests

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

Based on the request

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

In this example, useRequest receives an asynchronous function that is automatically triggered when the component is first loaded. In addition, useRequest automatically manages the loading and data states of asynchronous requests. You can use data and loading to fulfill your needs

Because the returned data is reactive, retrieving data.value from js needs to be used in watchEffect, but not in template.

Manual trigger

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

With options.manual = true, asynchronous functions are triggered only when run is called manually.

polling

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

You can set options.pollingInterval to enter the polling mode and trigger function execution periodically.

Rely on request

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;
})
Copy the code

Requests are only initiated when options.ready is true. Serial requests, dependent requests, and so on can be implemented with this feature.

Image stabilization

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

To enter the anti-shake mode, set options.debounceInterval. If run is frequently triggered, requests are made using the anti-shake policy.

The throttle

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

By setting options.throttleInterval, you can enter throttling mode. If run is frequently triggered at this point, the request will be throttled.

Cache & SWR

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

If options.cacheKey is set, useRequest will cache the current request end data. The next time a component initializes, if there is cached data, we will return cached data first, and then send a new request behind it, which is the ability of SWR. You can set the time for caching data to be reclaimed using cacheTime, and you can set the time for caching data to be kept fresh using staleTime.

preload

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

Requests for the same cacheKey are shared globally, meaning you can request data in advance. Subsequent requests return preloaded data in advance. This feature facilitates preloading.

Screen focus rerequested

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

If you set the options. RefreshOnWindowFocus = true, then refocus the browser window and revisible, will initiate the request again. You can set the request interval by setting options.focusTimespan. Default: none.

mutation

const { data, mutate } = useRequest( () => { return axios.post( `http://xxx.xx.com/api/userInfo` ); }); < button type = "button" @ click = {() = > mutate ({code: '1', MSG: 'test'})} > mutation test < / button >Copy the code

You can modify data directly through mutate.

Loading Delay

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

By setting options.loadingDelay, you can delay the time when loading becomes true to prevent blinking.

refreshDeps

This requirement is often encountered during development, and when some state changes, we need to re-execute the asynchronous request. UseRequest is a convenient way to do this.

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)
Copy the code

When random changes in the example, service is re-executed.

useVirtualList

Hook of long list virtualization list, used to solve the problem of slow first screen rendering and scrolling lag when rendering massive data.

GIF demo

The GIf image is large. Please wait patiently for it to load

Based on using

<template> <div class="hello"> <button style="margin-top: 30px" type="button" @click="handleVirtualScrollTo" > scroll to </button> <div :ref="containerProps.ref" @scroll="containerProps.onScroll" style="height: 300px; overflow: auto; border: 1px solid #cccccc" > <div :style="wrapperStyle"> <div v-for="active in list" :key="active" style=" height: 59px; border-bottom: 1px solid #cccccc; background-color: white; " > {{ active }} </div> </div> </div> </div> </template> <script lang="ts"> import { useVirtualList } from "v3hooks"; export default { setup() { const { list, wrapperStyle, containerProps, scrollTo } = useVirtualList( Array.from(Array(99999).keys()), { itemHeight: 60, overscan: 10, } ); const handleVirtualScrollTo = () => { scrollTo(22); }; return { list, wrapperStyle, containerProps, handleVirtualScrollTo, }; }}; </script>Copy the code

UseVirtualList takes an array and exports a virtualized list configured with elements. See the Api for details

useTextSelection

Hook to get the current text content and location selected by the user in real time.

UseTextSelection takes an HTMLElement and exports the selected text and location information.

GIF demo

Based on using

<template> <div style="text-align: center"> <p ref="p"> 123111111111111 aaaaaaaaaaabbbbbbbbbbb eeeeeeeeeeeeeeee < / p > < p > the selected value: {{text}} < / p > < p > location: the rect: {{ rect }}</p> <p>left: {{ rect.left }}</p> </div> </template> <script lang="ts"> import { useTextSelection } from "v3hooks"; export default { setup() { const { text, rect } = useTextSelection(); return { text, rect }; }}; </script>Copy the code

No value is passed. The default is Document, and any selectable text on the page will be evaluated

Listen for specific area text selections

<template> <div style="text-align: center"> <p ref="p"> 123111111111111 aaaaaaaaaaabbbbbbbbbbb eeeeeeeeeeeeeeee < / p > < p > the selected value: {{text}} < / p > < p > location: the rect: {{ rect }}</p> <p>left: {{ rect.left }}</p> </div> </template> <script lang="ts"> import { ref } from 'vue'; import { useTextSelection } from "v3hooks"; export default { setup() { const p = ref(); const { text, rect } = useTextSelection(p); return { text, p, rect }; }}; </script>Copy the code

P tags that pass a value of Ref listen only for a specific region.

useQRCode

A Hook for generating a QR code.

GIF demo

Based on using

</div> <img: SRC ="state" Alt =""> </div> </template> <script lang="ts"> import {  ref } from 'vue'; import { useQRCode } from ".. /.. /.. /dist/index.js"; const logo = require('.. /.. /assets/logo.png') export default { setup() { const text = ref<string>('https://www.baidu.com/') const state = useQRCode(text,{ logo: logo.default, colorDark: '#000000' }); setTimeout(()=>{ text.value = 'https://www.acfun.cn/' },2000) return { state }; }}; </script>Copy the code

UsQRCide can accept a static URL or a URL wrapped by Ref. When the Ref value changes, the QR code will change with the content.

useNetwork

A Hook to get the current state of the network.

Images demonstrate

Based on using

<template> <div class="hello" style="display:flex; align-items:flex-start;" > <p> Network status :{{state}}</p> </div> </template> <script lang="ts"> import {useNetwork} from "v3hooks"; Export default {setup() {// Get a const state in query = useNetwork(); // useVirtualList test return {state}; }}; </script>Copy the code

UseNetwork Returns network status information

At the end

There are a number of Hooks in the V3Hooks section that you can use. See the documentation and link to GitHub to learn how to use them.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Explore Vue3 Hooks

background

use

useRequest

Request Initiation Mode

Based on the request

Manual trigger

polling

Rely on request

Image stabilization

The throttle

Cache & SWR

preload

Screen focus rerequested

mutation

Loading Delay

refreshDeps

useVirtualList

GIF demo

Based on using

useTextSelection

GIF demo

Based on using

Listen for specific area text selections

useQRCode

GIF demo

Based on using

useNetwork

Images demonstrate

Based on using

At the end

Explore Vue3 Hooks

background

use

useRequest

Request Initiation Mode

Based on the request

Manual trigger

polling

Rely on request

Image stabilization

The throttle

Cache & SWR

preload

Screen focus rerequested

mutation

Loading Delay

refreshDeps

useVirtualList

GIF demo

Based on using

useTextSelection

GIF demo

Based on using

Listen for specific area text selections

useQRCode

GIF demo

Based on using

useNetwork

Images demonstrate

Based on using

At the end

Related Posts

Front-end monitoring system design

What happens from entering the URL to displaying the page

Summary of Node short chain principle and function realization