задний план
Как мы все знаем, наступила эра Vue 3. Во Vue 3 рекомендуется использовать комбинированный API, то есть программирование предыдущего класса преобразуется в функциональное программирование, логика переносится в сахар синтаксиса настройки, а настройка используется как точка входа комбинированного API. Хуки как функциональное программирование необходимы, потому что я использовал React раньше.В React AHooks — это более полная и практичная инкапсулированная библиотека хуков, но я не нашел подходящей библиотеки в Vue3, и позже решил написать свой набор Библиотека хуков, то есть сV3HooksВ этой библиотеке я представлю несколько хуков, если это поможет вам, вы можете оказать поддержку Star.
использовать
Далее, давайте рассмотрим некоторые часто используемые хуки.
useRequest
useRequest — это хук, используемый для управления асинхронными запросами. Он инкапсулирует общие методы инициирования запросов в требования для ускорения вашей повседневной разработки. Он имеет следующие функции:
- Автоматический запрос/ручной запрос
- SWR(stale-while-revalidate)
- кэш/предварительная загрузка
- Повторный запрос фокуса экрана
- голосование
- Стабилизатор
- дросселирование
- зависимый запрос
- мутация
- loading delay
Как инициировать запрос
Если сервис является объектом, useRequest будет использовать Fetch для отправки сетевых запросов.
import { useRequest } from 'v3hooks';
const { data } = useRequest(
{
url: 'http://xxx.xx.com/api/userInfo',
method: 'POST'
}
);
Если служба является асинхронной функцией, 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 будет автоматически управлять загрузкой и состоянием данных асинхронных запросов. Вы можете удовлетворить свои потребности с помощью данных и загрузки
Поскольку возвращаемые данные являются адаптивными, получение data.value в js необходимо использовать в watchEffect, а не в шаблоне.
Ручной триггер
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 станет истинным, запрос будет инициирован.На основе этой функции могут быть реализованы последовательные запросы, зависимые запросы и т. д.
Стабилизатор
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, процесс переходит в режим дросселирования. На этом этапе при частом запуске триггера политика будет ограничивать запросы.
Кэш и КСВ
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 , запрос будет повторно инициализирован, когда окно браузера перефокусируется и станет видимым. Вы можете установить интервал запроса, установив options.focusTimespan, по умолчанию нет.
мутация
const { data, mutate } = useRequest(
() => {
return axios.post(
`http://xxx.xx.com/api/userInfo`
);
}
);
<button type="button" @click={() => mutate({code:'1',msg:'test'})}>
突变测试
</button>
Вы можете мутировать напрямую, чтобы изменить данные.
Loading Delay
const { data, loading } = useRequest(
() => {
return axios.post(
`http://xxx.xx.com/api/userInfo`
);
},
{
loadingDelay: 300
}
);
Установив options.loadingDelay, вы можете отложить время, когда загрузка становится истинной, эффективно предотвращая мерцание.
refreshDeps
Это требование часто встречается в разработке, при изменении какого-либо состояния нам нужно повторно выполнить асинхронный запрос, использование 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 в примере изменится, сервис будет запущен повторно.
useVirtualList
Хуки для длинных списков виртуализированных списков используются для решения проблем медленного рендеринга первого экрана и зависаний прокрутки при рендеринге массивных данных.
демо GIF
Gif-изображение большое, наберитесь терпения и подождите, пока оно загрузится.
Основное использование
<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>
useVirtualList принимает массив и экспортирует виртуализированный список для настройки элементов. Конкретную конфигурацию см. в разделе API.
useTextSelection
Хук, который получает текстовое содержимое и местоположение, выбранное пользователем в данный момент, в режиме реального времени.
useTextSelection принимает HTMLElement и экспортирует выделенный текст и информацию о позиции.
демо GIF
Основное использование
<template>
<div style="text-align: center">
<p ref="p"> 可选择区域: 123111111111111aaaaaaaaaaabbbbbbbbbbb eeeeeeeeeeeeeeee</p>
<p>已选择的值：{{ text }}</p>
<p>位置信息：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>
Если значение не передано, по умолчанию используется документ, и будет вычисляться доступный для выбора текст на странице.
Прослушивание выделения текста в определенной области
<template>
<div style="text-align: center">
<p ref="p"> 可选择区域: 123111111111111aaaaaaaaaaabbbbbbbbbbb eeeeeeeeeeeeeeee</p>
<p>已选择的值：{{ text }}</p>
<p>位置信息：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>
Тег P, переданный как Ref, будет отслеживать только определенную область.
useQRCode
Крючок для генерации QR-кодов.
демо GIF
Основное использование
<template>
<div class="hello">
<div> 二维码:</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>
usQRCide может принимать статический URL-адрес или URL-адрес, заключенный в Ref. Когда значение Ref изменяется, QR-код будет меняться вместе с содержимым.
useNetwork
Хук для получения текущего состояния сети.
Демонстрация изображения
Основное использование
<template>
<div class="hello" style="display:flex;align-items:flex-start;">
<p> 网络状态:{{ state }}</p>
</div>
</template>
<script lang="ts">
import { useNetwork } from "v3hooks";
export default {
setup() {
// 获取query中的a
const state = useNetwork();
// useVirtualList测试
return {
state
};
},
};
</script>
useNetwork возвращает информацию о состоянии сети
конец
Для демонстрации вам было взято несколько хуков. В V3Hooks есть много практических хуков, которые может использовать каждый. Для конкретного использования вы можете просмотреть документацию и прикрепитьСсылка на GitHub, надеюсь, это будет полезно для вас.