Johdanto script setupiin
Miten kääntyy setup():ksi, automaattiset importit, ylätason sidosten saatavuus templaatissa.
Johdanto script setupiin on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Selkeämpi Composition API
<script setup> on Composition API:n käännösaikaista syntaktista sokeria. Se poistaa toistuvaa tukikoodia, joten yksitiedostoiset komponentit muistuttavat tavallista JavaScriptiä, jossa on reaktiivisia muuttujia.
setup()-funktiosta script setupiin
Perinteinen muoto tarvitsee export default -määrittelyn, setup()-funktion ja eksplisiittisen return-lauseen. Verratkaa sitä <script setup> -versioon.
<!-- classic -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>script setup -versio
<script setup> -muodossa ei ole kääreobjektia eikä return-lausetta. Ylätason muuttujat ovat automaattisesti käytettävissä templaatissa.
<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Eksplisiittistä return-lausetta ei tarvita
Kääntäjä käsittelee kaikki ylätason sidonnat — muuttujat, funktiot ja importit — templaatissa käytettävissä olevina. Kirjoitatte vähemmän koodia, eikä mikään jää vahingossa palauttamatta.
Myös ylätason funktiot ovat käytettävissä
Määritelkää funktio ylätasolla ja sitokaa se suoraan templaattiin. Sitä ei tarvitse palauttaa.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Tuodut komponentit rekisteröityvät automaattisesti
Perinteisessä API:ssa komponentit piti luetella components-asetuksessa. <script setup> -muodossa komponentin voi ottaa käyttöön templaatissa tuomalla sen.
<script setup>
import BaseButton from './BaseButton.vue'
</script>
<template>
<BaseButton />
</template>Käännetään silti setup()-funktioksi
Konepellin alla kääntäjä muuntaa <script setup> -lohkon tavalliseksi setup()-funktioksi. Saatte kaiken saman toiminnallisuuden ja suorituskyvyn, mutta koodin kirjoittaminen on selkeämpää.
TypeScriptin lisääminen lang ts:llä
Ottakaa TypeScript käyttöön lisäämällä tunnisteeseen lang="ts". Tämän jälkeen voitte määrittää muuttujien tyypit, käyttää geneerisiä tyyppejä kääntäjän makroissa ja hyödyntää täysimääräistä tyyppipäättelyä.
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>Kääntäjän makrot
<script setup> -lohkon sisällä käytettävissänne on erityisiä kääntäjän makroja, kuten defineProps, defineEmits ja defineExpose. Niitä ei tuoda import-lauseella, vaan kääntäjä tunnistaa ne. Tutustutte kuhunkin niistä tulevissa oppitunneissa.
Tavallisen script-lohkon käyttäminen yhdessä
Joskus tarvitsette asetuksia, jotka suoritetaan kerran moduulin laajuudessa, kuten mukautetun komponentin nimen. Voitte lisätä tavallisen <script>-lohkon <script setup> -lohkon rinnalle.
<script>
export default { name: 'MyComponent' }
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Miksi tiimit suosivat script setupia
- Vähemmän toistuvaa tukikoodia — ei kääreobjektia eikä return-lausetta.
- Komponenttien automaattinen rekisteröinti.
- Parempi suorituskyky ajonaikana käännösaikaisen analyysin ansiosta.
- Erinomainen TypeScript-tuki.
Se on suositeltu tapa kirjoittaa Vue 3:n yksitiedostoisia komponentteja.
Pikatarkistus
Varmistakaa, että ymmärrätte script setupin.
Kertaus
Opitte <script setup> -muodon perusteet:
- Se on käännösaikaista syntaktista sokeria
setup()-funktion ympärille. - Eksplisiittistä return-lausetta ei tarvita — ylätason sidonnat tulevat automaattisesti käytettäviksi.
- Tuodut komponentit rekisteröityvät automaattisesti.
- Lisätkää
lang="ts"TypeScriptiä varten. - Kääntäjän makrot, kuten
defineProps, ovat käytettävissä ilman import-lauseita.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”Johdanto script setupiin” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Johdanto script setupiin”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Johdanto script setupiin”?
Miten kääntyy setup():ksi, automaattiset importit, ylätason sidosten saatavuus templaatissa. Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Johdanto script setupiin”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Johdanto script setupiin
- defineProps ja defineEmits
- defineExpose ja useAttrs
- Composablesien importointi ja käyttö script setupissa