VueUse — это библиотека из более чем 200 служебных функций, которые можно использовать для взаимодействия с целым рядом API, включая интерфейсы для браузера, состояния, сети, анимации и времени. Эти функции позволяют разработчикам легко добавлять реактивные возможности в свои проекты Vue.js, помогая им с легкостью создавать мощные и отзывчивые пользовательские интерфейсы.

Одна из самых интересных фич VueUse — поддержка прямого манипулирования реактивными данными. Это означает, что разработчики могут запросто обновлять данные в режиме реального времени, не используя сложный и подверженный ошибкам код. Благодаря этому легко создавать приложения, которые могут реагировать на изменения в данных и соответствующим образом обновлять пользовательский интерфейс без необходимости ручного вмешательства.

Цель этой статьи — изучить некоторые утилиты VueUse, которые помогут нам улучшить реактивность в нашем приложении Vue 3.

Давайте начнем!

Инсталляция

Чтобы начать, давайте настроим среду разработки Vue.js. В этом руководстве мы будем использовать Vue.js 3 и composition API (API композиции), поэтому если вы до сих с ним еще не знакомы, вам повезло. Исчерпывающий курс от Vue School поможет вам начать работу и почувствовать себя уверенно при использовании composition API.

//create vue project with Vite
npm create vite@latest reactivity-project -- --template vue

cd reactivity-project

//install dependencies
npm install

//Start dev server
npm run dev

Теперь наш проект Vue.js запущен и работает. Давайте инсталлируем библиотеку VueUse, выполнив следующую команду:

npm install vueuse

Установив VueUse, можно начать изучение некоторых утилит VueUse.

refDebounced

Используя функцию refDebounced, вы можете создать “отложенную” (debounced) версию ref (cсылки), которая будет обновлять свое value (значение) только после определенного времени, прошедшего без каких-либо новых изменений в значении ref. Это может быть полезно в случаях, когда вы хотите отложить обновление значения ref, чтобы избежать ненужных апдейтов, а также при выполнении ajax-запроса (например, при вводе поиска) или для повышения производительности.

Теперь давайте посмотрим, как мы можем использовать refDebounced на примере.

<template>
  <div>
    <input type="text" v-model="myText" />
    <p>{{ debounced }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { refDebounced } from "@vueuse/core";
const myText = ref("hello");
const debounced = refDebounced(myText, 1000);
</script>

Теперь при изменении значения myText значение debounced не будет обновляться до тех пор, пока не пройдет хотя бы 1 секунда без каких-либо дальнейших коррекций значения  myText.

useRefHistory

Утилита "useRefHistory"  это составляющая VueUse, которая позволяет отслеживать историю значения ref (ссылки). Она обеспечивает доступ к предыдущим значениям ref, а также к ее текущему значению.

Используя функцию useRefHistory, вы можете легко реализовать в своем приложении Vue.js такие фичи, как undo/redo (отмена/повтор) или time travel debugging (обратная отладка).

Давайте попробуем рассмотреть базовый пример.

<template>
  <div>
    <form action="#" @submit.prevent="changeText()">
      <input type="text" v-model="inputText" /> <button>Submit</button>
    </form>
    <p>{{ myText }}</p>
    <button @click="undo">Undo</button>
    <button @click="redo">Redo</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRefHistory } from "@vueuse/core";
const myText = ref("hello");
const inputText = ref("");
const { history, undo, redo } = useRefHistory(myText);

const changeText = () => {
  myText.value = inputText.value;
};

</script>

В приведенном выше примере у нас есть базовая форма для изменения текста hello на любой вводимый в форму. Затем мы связываем состояние myText с функцией useRefHistory, которая может отслеживать историю состояния myText. Вставляем кнопки redo и undo, чтобы откатится во времени по нашей истории и просматривать прошлые значения.

refAutoReset

Используя composable (компонуемую) функцию refAutoReset, вы можете создавать ссылки, которые автоматически сбрасываются до значения по умолчанию после некоторого периода бездействия, что может быть полезно в случаях, когда вы хотите предотвратить отображение устаревших данных или сбросить входы формы по истечении определенного времени.

Давайте рассмотрим пример.

<template>
  <div>
    <form action="#" @submit.prevent="changeText()">
      <input type="text" v-model="myText" /> <button>Submit</button>
    </form>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { refAutoReset } from "@vueuse/core";
const myText = ref("");
const message = refAutoReset("default message", 5000);

const changeText = () => {
  message.value = myText.value;
};
</script>

Теперь при каждом изменении значения message (сообщение) отсчет времени на сброс значения до 0 будет прекращен. Если пройдет 5 секунд без каких-либо изменений значения message, то оно будет сброшено до default message (по умолчанию).

refDefault

С помощью composable refDefault вы можете создавать ссылки, которые имеют дефолтное значение, используемое, когда значение ссылки undefined (не определено), что может быть полезно в случаях, если необходимо обеспечить, чтобы ref всегда имела значение или предоставить значение по умолчанию для ввода формы.

<template>
  <div>
    <input type="text" v-model="myText" />
    <p>{{ myText }}</p>
  </div>
</template>

<script setup>
import { refDefault } from "@vueuse/core";
const myText = refDefault("hello");
</script>

В нашем примере, когда значение myText становится undefined, она переключается на hello.

ComputedEager

Иногда использование вычисляемого свойства может оказаться неподходящим инструментом, поскольку его ленивая оценка может ухудшить производительность. Давайте рассмотрим наглядный пример.

<template>
  <div>
    <p>{{ counter }}</p>
    <button @click="counter++">Increase</button>
    <p>Greater than 100: {{checkCount}} </p>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const counter = ref(0)

const checkCount = computed(() => {
    return this.counter >  5
})
</script>

В нашем примере мы видим, что для того, чтобы значение checkCount было истинным, нам придется кликнуть по кнопке increase (увеличить) 6 раз. Может показаться, что состояние checkCount отображается только дважды, то есть при загрузке страницы и когда значение counter.value достигает 6, но это не так. Каждый раз, когда мы запускаем вычисляемую функцию, наше состояние рендерится заново, то есть состояние checkCount рендерится 6 раз, что иногда влияет на производительность.

Именно здесь нам на помощь приходит computedEager. ComputedEager повторно рендерит наше обновленное состояние только тогда, когда это необходимо.

Теперь давайте проведем усовершенствование нашего примера с помощью computedEager.

<template>
  <div>
    <p>{{ counter }}</p>
    <button @click="counter--">Undo</button>
    <p>Greater than 5: {{checkCount}} </p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { computedEager } from '@vueuse/core'

const counter = ref(0)

const checkCount = computedEager(() => {
  return this.counter >  5
})

watchEffect(() => {
  console.log(checkCount.value);
  render.value++;
});
</script>

Теперь наш checkCount выполняет повторный рендеринг только тогда, когда счетчик больше 5.

Заключение

В целом, VueUse — это набор служебных функций, которые могут значительно повысить реактивность ваших проектов Vue.js. Существует множество других функций, помимо упомянутых здесь, поэтому обязательно изучите официальную документацию, чтобы узнать обо всех возможностях. Кроме того, если вы хотите получить практическое руководство по использованию VueUse, онлайн-курс VueUse для всех от Vue School — отличный ресурс для начала работы.

С помощью VueUse вы можете легко отслеживать и управлять состоянием приложения, создавать реактивные вычисляемые свойства и выполнять сложные операции с минимальным количеством кода. Они [набор служебных функций VueUse] являются жизненно важным компонентом экосистемы Vue.js и могут значительно повысить эффективность и эксплуатационную надежность ваших проектов.

AstroJS — это JS фреймворк, который может работать как SSG (генератор статических сайтов) так обеспечивать SSR (рендеринг на стороне сервера). Это универсальный инструмент для создания быстрых, контентных веб‑сайтов на популярных фронтенд фреймворках типа Vue, React, Svelte.

Как начать использовать Astro c Vue.js? Поговорим на открытом уроке 20 апреля, который пройдет в рамках онлайн-курса «Vue.js разработчик». На этом уроке посмотрим на фактическое использование компонентов Vue в AstroJS.

• Записаться на открытый урок