Importowanie i używanie composables w script setup
Importowanie composables, używanie composables VueUse innych firm, porządkowanie importów.
Importowanie i używanie composables w script setup to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Composables i script setup
Composables to funkcje pakujące reaktywną logikę przeznaczoną do ponownego użycia. W przypadku <script setup> korzystanie z nich ogranicza się do zaimportowania i wywołania na najwyższym poziomie.
Importowanie na najwyższym poziomie
Composable należy zawsze wywoływać na najwyższym poziomie <script setup> — nie wewnątrz warunku, pętli ani zagnieżdżonej funkcji. Dzięki temu Vue prawidłowo rejestruje jego reaktywność i haki cyklu życia.
<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>Dlaczego najwyższy poziom ma znaczenie
Composables często rejestrują haki cyklu życia, takie jak onMounted, albo konfigurują obserwatory. Muszą one uruchomić się podczas konfigurowania komponentu, co następuje tylko wtedy, gdy composable zostanie wywołany synchronicznie na najwyższym poziomie.
Destrukturyzuj tylko potrzebne elementy
Composable zwraca obiekt zawierający reaktywne wartości i funkcje. Destrukturyzuj tylko te elementy, których używa komponent; zmieniaj ich nazwy, aby uniknąć konfliktów przy dwukrotnym wywołaniu tego samego composable.
<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>Poznaj VueUse
VueUse to popularna biblioteka gotowych composables. Zamiast samodzielnie pisać często używaną logikę, zaimportuj sprawdzony composable. Zainstaluj bibliotekę raz i importuj potrzebne elementy.
<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>useLocalStorage w praktyce
useLocalStorage zwraca ref zsynchronizowany z localStorage. Zmień ref, a pamięć przeglądarki zostanie zaktualizowana; przeładuj stronę, a wartość pozostanie zachowana.
<template>
<input v-model="name" />
<p>Saved: {{ name }}</p>
</template>useMouse dla reaktywnych współrzędnych
useMouse śledzi położenie wskaźnika za pomocą reaktywnych ref. Samodzielnie dodaje i usuwa nasłuchiwanie zdarzeń, więc nie trzeba ręcznie zarządzać sprzątaniem.
<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>
<template>
<p>{{ x }}, {{ y }}</p>
</template>Composables można łączyć
Composable może wywoływać inne composables. Takie warstwowe podejście stanowi podstawę Composition API — twórz małe elementy i łącz je w większe funkcje.
import { useMouse } from '@vueuse/core'
export function useMouseDistance() {
const { x, y } = useMouse()
const distance = computed(() => Math.hypot(x.value, y.value))
return { distance }
}await na najwyższym poziomie
<script setup> obsługuje bezpośrednie użycie await na najwyższym poziomie. Komponent staje się asynchronicznym setup, a framework może wstrzymać renderowanie do czasu rozstrzygnięcia promise.
<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>Suspense z asynchronicznym setup
Komponent używający await na najwyższym poziomie musi zostać opakowany przez rodzica w granicę <Suspense>. Suspense wyświetla treść zastępczą do czasu zakończenia asynchronicznego setup.
<template>
<Suspense>
<AsyncUser />
<template #fallback>Loading...</template>
</Suspense>
</template>Najlepsze praktyki
- Nazywaj composables, używając prefiksu
use. - Wywołuj je wyłącznie na najwyższym poziomie.
- Zwracaj ref (lub obiekt
reactiveopakowany wtoRefs). - Przed napisaniem własnego rozwiązania sprawdź, czy typowych potrzeb nie zaspokaja VueUse.
Szybkie sprawdzenie
Sprawdź, czy rozumiesz działanie composables.
Podsumowanie
Nauczyłeś się korzystać z composables:
- Importuj je i wywołuj na najwyższym poziomie
<script setup>. - Destrukturyzuj i zmieniaj nazwy potrzebnych elementów.
- VueUse oferuje gotowe composables, takie jak
useLocalStorageiuseMouse. awaitna najwyższym poziomie sprawia, że setup staje się asynchroniczny, i współpracuje z<Suspense>.
Często zadawane pytania
Czy lekcja „Importowanie i używanie composables w script setup” jest bezpłatna?
Tak — pełny tekst „Importowanie i używanie composables w script setup” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Importowanie i używanie composables w script setup”?
Importowanie composables, używanie composables VueUse innych firm, porządkowanie importów. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Importowanie i używanie composables w script setup”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Wprowadzenie do script setup
- defineProps i defineEmits
- defineExpose i useAttrs
- Importowanie i używanie composables w script setup