Vue Academy · Урок

Импорт и использование компонуемых функций в script setup

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

«Импорт и использование компонуемых функций в script setup» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Компонуемые функции и настройка скрипта

Компонуемые функции — это функции, объединяющие реактивную логику для повторного использования. В <script setup> пользоваться ими так же просто, как импортировать и вызвать их на верхнем уровне.

Импорт на верхнем уровне

Всегда вызывайте компонуемую функцию на верхнем уровне <script setup> — не внутри условия, цикла или вложенной функции. Это гарантирует, что Vue правильно зарегистрирует её реактивность и хуки жизненного цикла.

<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>

Почему важен верхний уровень

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

Извлекайте только нужное

Компонуемая функция возвращает объект с реактивными значениями и функциями. Извлекайте только используемые компонентом элементы; переименовывайте их, чтобы избежать конфликтов при повторном вызове одной и той же компонуемой функции.

<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>

Знакомство с VueUse

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

<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>

useLocalStorage в действии

useLocalStorage возвращает ref, синхронизированный с localStorage. Измените ref — и хранилище браузера обновится; перезагрузите страницу — и значение сохранится.

<template>
  <input v-model="name" />
  <p>Saved: {{ name }}</p>
</template>

useMouse для реактивных координат

useMouse отслеживает положение указателя с помощью реактивных refs. Он сам добавляет и удаляет обработчик события, поэтому Вам не нужно вручную управлять очисткой.

<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>

<template>
  <p>{{ x }}, {{ y }}</p>
</template>

Компонуемые функции объединяются

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

import { useMouse } from '@vueuse/core'

export function useMouseDistance() {
  const { x, y } = useMouse()
  const distance = computed(() => Math.hypot(x.value, y.value))
  return { distance }
}

Ожидание на верхнем уровне

<script setup> поддерживает прямое использование await на верхнем уровне. Компонент становится асинхронным, а платформа может приостановить отображение до разрешения промиса.

<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>

Приостановка при асинхронной настройке

Компонент, использующий await на верхнем уровне, должен быть обёрнут родителем в границу <Suspense>. Suspense показывает запасное содержимое, пока асинхронная настройка не завершится.

<template>
  <Suspense>
    <AsyncUser />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

Быстрая проверка

Проверьте, насколько хорошо Вы поняли компонуемые функции.

Итоги

Вы научились использовать компонуемые функции:

Импортируйте и вызывайте их на верхнем уровне <script setup>.
Извлекайте (и переименовывайте) нужные элементы.
VueUse предлагает готовые компонуемые функции, такие как useLocalStorage и useMouse.
await на верхнем уровне делает настройку асинхронной и используется вместе с <Suspense>.

Часто задаваемые вопросы

Урок «Импорт и использование компонуемых функций в script setup» бесплатный?

Да — полный текст урока «Импорт и использование компонуемых функций в script setup» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Импорт и использование компонуемых функций в script setup»?

Импорт компонуемых функций, использование сторонних компонуемых функций VueUse, организация импортов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Импорт и использование компонуемых функций в script setup»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Введение в script setup
defineProps и defineEmits
defineExpose и useAttrs
Импорт и использование компонуемых функций в script setup

← Назад к Vue Academy