5 библиотек VueUse, которые могут ускорить разработку

внешний интерфейс Vue.js
5 библиотек VueUse, которые могут ускорить разработку

VueUse — это проект Энтони Фу с открытым исходным кодом, который предоставляет разработчикам Vue большой набор базовых служебных функций Composition API для Vue 2 и Vue 3.

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

Мне нравится библиотека VueUse, потому что она действительно ставит разработчика на первое место при принятии решения о том, какие утилиты предоставить, и это хорошо поддерживаемая библиотека, потому что она постоянно обновляется с помощью текущей версии Vue.

Какая там утилита VueUse?

Если вы хотите увидеть полный список каждой утилиты, я определенно рекомендую проверить это.официальная документация. Но если подытожить, то в VueUse есть 9 типов функций.

  1. Animation- Содержит простые в использовании функции перехода, тайм-аута и синхронизации.
  2. Browser- Доступно для различных элементов управления экраном, буфера обмена, настроек и т. д.
  3. Component- Предоставляет сокращения для различных методов компонента.
  4. Formatters- Обеспечивает возможности форматирования времени отклика.
  5. Sensors- Слушайте разные события DOM событий и сетевые события.
  6. State- Управление состоянием пользователя (глобальное, локальное хранилище, хранилище сеансов).
  7. Utility- Различные служебные функции, такие как геттеры, условия, синхронизация ссылок и т. д.
  8. Watch- Более продвинутые типы наблюдателей, такие как наблюдатели с паузой, наблюдатели с отсрочкой и условные наблюдатели.
  9. Misc- Различные типы событий, функциональность веб-сокетов и веб-воркеров

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

В этом уроке мы рассмотрим пять различных функций VueUse, чтобы вы могли понять, насколько легко работать в библиотеке.

Но сначала давайте добавим его в проект Vue!

Установите VueUse в свой проект Vue.

Одной из лучших особенностей VueUse является то, что он совместим как с Vue 2, так и с Vue 3 всего в одном пакете!

Есть два варианта установки VueUse npm или CDN.

npm i @vueuse/core # yarn add @vueuse/core

<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

Я рекомендую использовать NPM, так как его использование легче понять, но если мы используем CDN, VueUse будет передан в приложение.window.VueUseдоступ.

Для установки NPM все функции могут быть реконструированы из объекта с помощью стандартного@vueuse/core, и получить к нему доступ следующим образом.

import { useRefHistory } from '@vueuse/core'

Хорошо, теперь, когда у нас установлен VueUse, давайте использовать его в нашем приложении!

useRefHistory отслеживает изменения в ответных данных

useRefHistoryКаждое изменение, внесенное в Ref, отслеживается и сохраняется в массиве. Это позволяет нам легко предоставлять функции отмены и повтора в нашем приложении.

Давайте посмотрим на пример, где мы создаем текстовую область, которую мы хотели бы отменить.

Первый шаг — создать наш базовый компонент без использования VueUse — с ref, textarea и кнопками для отмены и повтора.

<template>
  <p> 
    <button> Undo </button>
    <button> Redo </button>
  </p>
  <textarea v-model="text"/>
</template>

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>

<style scoped>
  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;;
  }
</style>

Тогда давайте пройдем импортuseRefHistoryФункция, затем извлеките историю, отменить и недвижимость от нашего текста Ref, чтобы добавить vueuse. Это как звонитьuseRefHistoryИ так же просто, как передать наш ref .

import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'

const text = ref('')
const { history, undo, redo } = useRefHistory(text)

Каждый раз, когда наша ссылка изменяется, это запускает наблюдателя, который обновляет тот, который мы только что создали.historyАтрибуты.

Тогда, чтобы мы на самом деле сможем увидеть, что происходит, давайте распечатаем историю внутри шаблона, призывая нашundoа такжеredoфункция.

<template>
  <p> 
    <button @click="undo"> Undo </button>
    <button @click="redo"> Redo </button>
  </p>
  <textarea v-model="text"/>
  <ul>
    <li v-for="entry in history" :key="entry.timestamp">
      {{ entry }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'
const text = ref('')
const { history, undo, redo } = useRefHistory(text)
</script>

<style scoped>
  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;;
  }
</style>

Хорошо, запустим. Когда мы вошли, каждый символ вызовет новую запись в массиве истории, если мы нажмем на отмену/повтор, мы перейдем к соответствующей записи.

Существуют различные варианты, которые вы можете добавить к функции. Например, мы можем отслеживать количество развернутых ответов объекта и ограничивать запись этой истории.

const { history, undo, redo } = useRefHistory(text, {
  deep: true,
  capacity: 10,
})

Обязательно ознакомьтесь с документацией для получения полного списка опций.

onClickOutside закрывает модальное окно

onClickOutsideОбнаруживает любой щелчок за пределами элемента. По моему опыту, наиболее распространенным вариантом использования этой функции является закрытие любого модального окна или всплывающего окна.

Как правило, мы хотим, чтобы наш модал блокировал остальную часть веб-страницы, чтобы привлечь внимание пользователя и ограничить количество ошибок. Однако мы хотим, чтобы он закрывался, если они щелкают за пределами модального окна.

Это можно сделать в два этапа:

  1. Создайте шаблон для нас, чтобы обнаружить эталонный элемент
  2. Запустите onClickOutside с этой ссылкой на шаблон

это использованиеonClickOutsideПростой компонент с всплывающим окном.

<template>
  <button @click="open = true"> Open Popup </button>
  <div class="popup" v-if='open'>
    <div class="popup-content" ref="popup">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis aliquid autem reiciendis eius accusamus sequi, ipsam corrupti vel laboriosam necessitatibus sit natus vero sint ullam! Omnis commodi eos accusantium illum?
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
const open = ref(false) // state of our popup
const popup = ref() // template ref
// whenever our popup exists, and we click anything BUT it
onClickOutside(popup, () => {
  open.value  = false
})
</script>

<style scoped>
  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;;
  }
  .popup {
    position: fixed;
    top: ;
    left: ;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(, , , 0.1);
  }
  .popup-content {
    min-width: 300px;
    padding: 20px;
    width: 30%;
    background: #fff;
  }
</style>

В результате мы можем открыть всплывающее окно с помощью нашей кнопки, а затем закрыть его щелчком за пределами окна содержимого всплывающего окна.

useVModel упрощает привязку v-модели

Распространенным вариантом использования для разработчиков Vue является создание пользовательских привязок v-модели для компонентов. Это означает, что наш компонент принимает значение в качестве реквизита, и всякий раз, когда это значение изменяется, наш компонент отправляет событие обновления родителю.

Функция _vmodel упрощает это просто использовать стандартrefграмматика. Предположим, у нас есть пользовательский ввод текста, пытающийся создать значение для его ввода текста.v-model. Как правило, мы должны принять значениеprop,ПотомemitСобытие изменения для обновления значения данных в родительском компоненте.

Вместо использования ссылки и вызоваprops.valueа такжеupdate:value. Это помогает уменьшить количество различных грамматиков, которые нам нужно помнить!

<template>
  <div>
    <input 
           type="text" 
           :value="data"
           @input="update"
           />
  </div>
</template>

<script>
import { useVModel } from '@vueuse/core'
export default {
  props: ['data'],
  setup(props, { emit }) {
    const data = useVModel(props, 'data', emit)
    console.log(data.value) // equal to props.data
    data.value = 'name' // equal to emit('update:data', 'name')
    const update = (event) => {
        data.value = event.target.value
    }
    return {
        data,
        update
    }
  },
}
</script>

Всякий раз, когда нам нужно получить доступ к нашему значению, мы просто вызываем.value, useVModel даст нам значения из реквизита нашего компонента. И всякий раз, когда мы изменяем значение объекта, useVModel будет сообщать родительскому компоненту.генерировать событие обновления.

Вот краткий пример того, как может выглядеть этот родительский компонент...

<template>
  <div>
    <p> {{ data }} </p>
    <custom-input 
      :data="data" 
      @update:data="data = $event"
    />
  </div>
</template>

<script>
import CustomInput from './components/CustomInput.vue'
import { ref } from 'vue'
export default {
  components: {
    CustomInput,
  },
  setup () {
    const data = ref('hello')
    return {
      data
    }
  }
}

Отслеживание видимости элементов с помощью IntersectionObserver

При определении того, перекрываются ли два элемента,Intersection Observers очень могущественный. Хороший вариант использования — проверить, виден ли элемент в данный момент в области просмотра.

По сути, он проверяет процент пересечения целевого элемента с корневым элементом/документом. Если процент превышает определенный порог, он вызывает обратный вызов, чтобы определить, виден ли целевой элемент.

useIntersectionObserverПредоставляет простой синтаксис для использования IntersectionObserver API. Все, что нам нужно сделать, это предоставить ссылку на шаблон для элемента, который мы хотим проверить. По умолчанию IntersectionObserver будет основываться на области просмотра документа с порогом0.1-- поэтому, когда этот порог пересекается в любом направлении, наш наблюдатель пересечения будет стрелять.

Код для этого примера может выглядеть так: у нас есть поддельный абзац, который просто занимает место в нашем окне просмотра, наш целевой элемент, а затем оператор печати, который печатает видимость нашего элемента.

<template>
  <p> Is target visible? {{ targetIsVisible }} </p>
  <div class="container">
    <div class="target" ref="target">
      <h1>Hello world</h1>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
    )
    return {
      target,
      targetIsVisible,
    }
  },
}
</script>

<style scoped>
.container {
  width: 80%;
  margin:  auto;
  background-color: #fafafa;
  max-height: 300px;
  overflow: scroll;
}
.target {
  margin-top: 500px;
  background-color: #1abc9c;
  color: white;
  padding: 20px;
}
</style>

Когда мы запустим его и прокрутим, мы увидим, что он обновляется правильно.

Мы также можем указать дополнительные параметры для Intersection Observer, такие как изменение его корневого элемента, полей (смещение корневой ограничивающей рамки, используемой для расчета пересечений) и пороговых уровней.

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }], observerElement) => {
    targetIsVisible.value = isIntersecting
  },
  {
    // root, rootMargin, threshold, window
    // full options in the source: https://github.com/vueuse/vueuse/blob/main/packages/core/useIntersectionObserver/index.ts
    threshold: 0.5,
  }
)

Не менее важно, что этот метод возвращаетstopфункцию, мы можем вызвать эту функцию, чтобы прекратить наблюдение за пересечением. Это особенно полезно, если мы хотим отслеживать только то, когда элемент впервые отображается на экране.

В этом коде один разtargetIsVisibleустановить какtrue, наблюдатель останавливается, и даже если мы прокручиваем от целевого элемента, наше значение остается таким жеtrue.

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }], observerElement) => {
    targetIsVisible.value = isIntersecting
    if (isIntersecting) {
      stop()
    }
  },
)

useTransition для перехода между значениями

useTransitionявляется одним из моих любимых функций во всей библиотеке Veuse. Это позволяет нам плавно преобразовывать значения в пределах линии.

У нас есть цифровой источник, хранящийся как ref, и выход, который будет модерировать различные числовые значения. Например, предположим, что мы хотим построить счетчик

Мы можем сделать это в три шага:

  • создать нашcountref и инициализировать его нулем
  • использоватьuseTransitionСоздайтеoutputref (установить продолжительность и тип перехода)
  • Изменятьcountзначение
<script setup>
import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'

const source = ref(0)

const output = useTransition(source, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})

source.value = 5000

</script>

Затем в нашем шаблоне мы хотим отобразитьoutput, так как он плавно переходит между значениями.

<template>
  <h2> 
    <p> Join over </p>
    <p> {{ Math.round(output) }}+ </p>
    <p>Developers </p>
  </h2>
</template>

<script setup>
import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
const source = ref()
const output = useTransition(source, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})
source.value = 5000
</script>

Это результат!

мы также можем использоватьuseTransitionдля перехода всего массива чисел, что полезно при работе с положением или цветом. Аккуратный трюк для работы с цветами — использовать вычисляемое свойство для форматирования значений RGB в правильный синтаксис цвета.

<template>
  <h2 :style="{ color: color } "> COLOR CHANGING </h2>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
const source = ref([, , ])
const output = useTransition(source, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})
const color = computed(() => {
  const [r, g, b] = output.value
  return `rgb(${r}, ${g}, ${b})`
})
source.value = [255, , 255]
</script>

Некоторые интересные способы дальнейшей настройки — это использование любых встроенных пресетов перехода или использование функций плавности CSS для определения наших собственных переходов.

последние мысли

Это ни в коем случае не полное руководство по VueUse, это лишь некоторые из функций, которые мне показались наиболее интересными в библиотеке VueUse.

Мне нравятся все эти полезные особенности.

оригинал:learnvue.co, Мэтт Марибойок

Категории