Wprowadzenie do script setup
Jak jest kompilowany do setup(), automatyczne importy, powiązania z najwyższego poziomu dostępne w szablonie.
Wprowadzenie do script setup to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 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.
Czytelniejszy Composition API
<script setup> to składniowy cukier rozwijany podczas kompilacji dla Composition API. Usuwa kod pomocniczy, dzięki czemu komponenty jednoplikowe przypominają zwykły JavaScript z reaktywnymi zmiennymi.
Od setup() do script setup
Klasyczna forma wymaga użycia export default, funkcji setup() oraz jawnego return. Porównaj ją z wersją <script setup>.
<!-- classic -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>Wersja script setup
W przypadku <script setup> nie ma obiektu opakowującego ani instrukcji return. Zmienne z najwyższego poziomu są automatycznie udostępniane szablonowi.
<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Nie trzeba jawnie używać return
Kompilator traktuje każde powiązanie z najwyższego poziomu — zmienne, funkcje i importy — jako dostępne w szablonie. Piszesz mniej kodu i nie musisz obawiać się, że zapomnisz coś zwrócić.
Funkcje z najwyższego poziomu też są dostępne
Zdefiniuj funkcję na najwyższym poziomie i bezpośrednio powiąż ją z szablonem. Nie trzeba jej zwracać.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Importowane komponenty rejestrują się automatycznie
W klasycznym API trzeba było wymienić komponenty w opcji components. W przypadku <script setup> samo zaimportowanie komponentu wystarcza, aby można było używać go w szablonie.
<script setup>
import BaseButton from './BaseButton.vue'
</script>
<template>
<BaseButton />
</template>Nadal kompiluje się do setup()
Pod spodem kompilator przekształca <script setup> w zwykłą funkcję setup(). Otrzymujesz to samo działanie i taką samą wydajność, ale tworzysz kod w czytelniejszy sposób.
Dodawanie TypeScriptu za pomocą lang ts
Aby włączyć TypeScript, dodaj lang="ts" do znacznika. Następnie możesz określać typy zmiennych, używać generyków w makrach kompilatora i korzystać z pełnego wnioskowania typów.
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>Makra kompilatora
Wewnątrz <script setup> dostępne są specjalne makra kompilatora, takie jak defineProps, defineEmits i defineExpose. Nie importuje się ich — rozpoznaje je kompilator. Każde z nich zostanie omówione w kolejnych lekcjach.
Łączenie ze zwykłym blokiem script
Czasami potrzebne są opcje wykonywane raz w zakresie modułu, na przykład własna nazwa komponentu. Obok <script setup> można dodać zwykły blok <script>.
<script>
export default { name: 'MyComponent' }
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Dlaczego zespoły wybierają script setup
- Mniej kodu pomocniczego — brak obiektu opakowującego i instrukcji return.
- Automatyczna rejestracja komponentów.
- Lepsza wydajność w czasie działania dzięki analizie podczas kompilacji.
- Świetna obsługa TypeScriptu.
To zalecany sposób tworzenia komponentów jednoplikowych Vue 3.
Szybkie sprawdzenie
Sprawdź, czy rozumiesz działanie script setup.
Podsumowanie
Poznałeś najważniejsze informacje o <script setup>:
- Jest cukrem składniowym dla
setup(), rozwijanym podczas kompilacji. - Nie trzeba jawnie używać return — powiązania z najwyższego poziomu są automatycznie udostępniane.
- Importowane komponenty rejestrują się automatycznie.
- Dodaj
lang="ts", aby używać TypeScriptu. - Makra kompilatora, takie jak
defineProps, są dostępne bez importowania.
Często zadawane pytania
Czy lekcja „Wprowadzenie do script setup” jest bezpłatna?
Tak — pełny tekst „Wprowadzenie do 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 „Wprowadzenie do script setup”?
Jak jest kompilowany do setup(), automatyczne importy, powiązania z najwyższego poziomu dostępne w szablonie. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Wprowadzenie do 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