Einführung in script setup
Wie zu setup() kompiliert wird, automatische Imports, im Template verfügbare Bindings auf oberster Ebene.
Einführung in script setup ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Eine übersichtlichere Composition API
<script setup> ist syntaktischer Zucker der Composition API, der zur Compile-Zeit verarbeitet wird. Er entfernt Boilerplate-Code, sodass Ihre Single-File-Komponenten wie normales JavaScript mit reaktiven Variablen aussehen.
Von setup() zu script setup
Die klassische Form benötigt ein export default, eine setup()-Funktion und ein explizites return. Vergleichen Sie sie mit der Version mit <script setup>.
<!-- classic -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>Die script setup-Version
Bei <script setup> gibt es weder ein umschließendes Objekt noch eine return-Anweisung. Variablen auf der obersten Ebene werden automatisch für das Template verfügbar gemacht.
<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Keine explizite Rückgabe erforderlich
Der Compiler behandelt jede Bindung auf der obersten Ebene – Variablen, Funktionen und Imports – als im Template verfügbar. Sie schreiben weniger Code und können nicht mehr versehentlich vergessen, etwas zurückzugeben.
Funktionen auf der obersten Ebene sind ebenfalls verfügbar
Definieren Sie eine Funktion auf der obersten Ebene und binden Sie sie direkt im Template. Sie müssen sie nicht zurückgeben.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Importierte Komponenten werden automatisch registriert
In der klassischen API mussten Sie Komponenten in einer components-Option auflisten. Bei <script setup> reicht es, eine Komponente zu importieren, damit sie im Template verwendet werden kann.
<script setup>
import BaseButton from './BaseButton.vue'
</script>
<template>
<BaseButton />
</template>Es wird weiterhin zu setup() kompiliert
Intern wandelt der Compiler <script setup> in eine reguläre setup()-Funktion um. Sie erhalten dasselbe Verhalten und dieselbe Leistung, schreiben den Code aber übersichtlicher.
TypeScript mit lang ts hinzufügen
Aktivieren Sie TypeScript, indem Sie dem Tag lang="ts" hinzufügen. Anschließend können Sie Variablen typisieren, Generics für Compiler-Makros verwenden und die vollständige Typinferenz nutzen.
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>Compiler-Makros
Innerhalb von <script setup> stehen Ihnen spezielle Compiler-Makros wie defineProps, defineEmits und defineExpose zur Verfügung. Sie werden nicht importiert – der Compiler erkennt sie automatisch. In den kommenden Lektionen lernen Sie jedes davon kennen.
Mit einem normalen script-Block kombinieren
Manchmal benötigen Sie Optionen, die einmalig im Modul-Scope ausgeführt werden, etwa einen benutzerdefinierten Komponentennamen. Sie können neben <script setup> einen regulären <script>-Block hinzufügen.
<script>
export default { name: 'MyComponent' }
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Warum Teams script setup bevorzugen
- Weniger Boilerplate-Code – kein umschließendes Objekt und keine Rückgabe.
- Automatische Registrierung von Komponenten.
- Bessere Laufzeitleistung durch Analyse zur Compile-Zeit.
- Hervorragende TypeScript-Unterstützung.
Für Vue-3-Single-File-Komponenten ist dies der empfohlene Stil.
Schnelltest
Überprüfen Sie Ihr Verständnis von script setup.
Zusammenfassung
Sie haben die Grundlagen von <script setup> gelernt:
- Es ist syntaktischer Zucker für
setup(), der zur Compile-Zeit verarbeitet wird. - Keine explizite Rückgabe – Bindungen auf der obersten Ebene werden automatisch verfügbar gemacht.
- Importierte Komponenten werden automatisch registriert.
- Fügen Sie
lang="ts"für TypeScript hinzu. - Compiler-Makros wie
definePropssind ohne Imports verfügbar.
Häufig gestellte Fragen
Ist die Lektion „Einführung in script setup“ kostenlos?
Ja — der vollständige Text von „Einführung in script setup“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Einführung in script setup“?
Wie zu setup() kompiliert wird, automatische Imports, im Template verfügbare Bindings auf oberster Ebene. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Einführung in script setup“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Einführung in script setup
- defineProps und defineEmits
- defineExpose und useAttrs
- Composables in script setup importieren und verwenden