Introduktion till script setup
Hur kompileras till setup(), automatiska importer, bindningar på toppnivå som är tillgängliga i mallen.
Introduktion till script setup är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
En renare Composition API
<script setup> är syntaktiskt socker vid kompilering för Composition API. Det tar bort överflödig standardkod, så att dina single-file-komponenter ser ut som vanlig JavaScript med reaktiva variabler.
Från setup() till script setup
Den klassiska formen kräver ett export default, en setup()-funktion och ett explicit return. Jämför med versionen med <script setup>.
<!-- classic -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>Versionen med script setup
Med <script setup> finns inget omslutande objekt och ingen return-sats. Variabler på toppnivå exponeras automatiskt för mallen.
<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Ingen explicit return behövs
Kompilatorn behandlar alla bindningar på toppnivå – variabler, funktioner och importer – som tillgängliga i mallen. Du skriver mindre och riskerar inte att glömma att returnera något.
Funktioner på toppnivå är också tillgängliga
Definiera en funktion på toppnivå och bind den direkt i mallen. Du behöver inte returnera den.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Importerade komponenter registreras automatiskt
I det klassiska API:t behövde du ange komponenter i ett components-alternativ. Med <script setup> räcker det att importera en komponent för att kunna använda den i mallen.
<script setup>
import BaseButton from './BaseButton.vue'
</script>
<template>
<BaseButton />
</template>Det kompileras fortfarande till setup()
I bakgrunden omvandlar kompilatorn <script setup> till en vanlig setup()-funktion. Du får samma beteende och prestanda, men en renare utvecklingsupplevelse.
Lägg till TypeScript med lang ts
Aktivera TypeScript genom att lägga till lang="ts" i taggen. Sedan kan du typa variabler, använda generics med kompilatormakron och få fullständig typinferens.
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>Kompilatormakron
Inuti <script setup> får du tillgång till särskilda kompilatormakron som defineProps, defineEmits och defineExpose. De importeras inte – kompilatorn känner igen dem. Du kommer att gå igenom var och en i kommande lektioner.
Kombinera med ett vanligt script-block
Ibland behöver du alternativ som körs en gång på modulnivå, till exempel ett anpassat komponentnamn. Du kan lägga till ett vanligt <script>-block bredvid <script setup>.
<script>
export default { name: 'MyComponent' }
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Varför team föredrar script setup
- Mindre standardkod – inget omslutande objekt eller return.
- Automatisk komponentregistrering.
- Bättre prestanda vid körning tack vare analys vid kompilering.
- Utmärkt TypeScript-stöd.
Det är den rekommenderade stilen för Vue 3:s single-file-komponenter.
Snabbkontroll
Bekräfta att du har förstått script setup.
Sammanfattning
Du har lärt dig grunderna i <script setup>:
- Det är syntaktiskt socker vid kompilering ovanpå
setup(). - Ingen explicit return-sats – bindningar på toppnivå exponeras automatiskt.
- Importerade komponenter registreras automatiskt.
- Lägg till
lang="ts"för TypeScript. - Kompilatormakron som
definePropsär tillgängliga utan importer.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Introduktion till script setup” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Introduktion till script setup”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Introduktion till script setup”?
Hur kompileras till setup(), automatiska importer, bindningar på toppnivå som är tillgängliga i mallen. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Introduktion till script setup”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Introduktion till script setup
- defineProps och defineEmits
- defineExpose och useAttrs
- Importera och använda composables i script setup