setup()-funktio ja script setup
Kirjoita logiikkaa setup()-funktiossa tai käytä -syntaktista sokeria, tuo arvot templaten käyttöön ja ymmärrä Composition APIn elinkaarikoukut
setup()-funktio ja script setup on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
setup()-funktio
Vuen 3:n Composition API:ssa setup() on komponenttiasetus, joka korvaa asetukset data, methods, computed ja watch. Se vastaanottaa propsit ja setup-kontekstin argumentteina ja palauttaa sen, mitä template tarvitsee.
export default {
props: { userId: String },
setup(props, { emit, attrs, slots }) {
const user = ref(null);
onMounted(async () => {
user.value = await fetchUser(props.userId);
});
return { user }; // must return what template uses
}
};<script setup> — syntaksisokeri
<script setup> on setup():n käännösaikainen syntaksisokeri. Kaikki ylätasolla määritellyt asiat ovat automaattisesti käytettävissä templaatissa. Return-lauseketta ei tarvita.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>Elinkaarikoukut setup()-funktiossa
Vuen 3:n elinkaarikoukut ovat importoitavia funktioita: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate ja niin edelleen. Niitä voidaan kutsua useita kertoja useiden käsittelijöiden rekisteröimiseksi.
<script setup>
import { onMounted, onUnmounted } from 'vue';
let timer: ReturnType<typeof setInterval>;
onMounted(() => {
timer = setInterval(tick, 1000);
console.log('Component mounted');
});
onUnmounted(() => {
clearInterval(timer); // cleanup
});
</script>setup()-funktion propsit
setup()-funktiossa propsit ovat reaktiivisia. Älkää hajottako niitä suoraan — käyttäkää toRefs(props)-funktiota tai käyttäkää niitä muodossa props.x reaktiivisuuden säilyttämiseksi.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() — tarjoaminen ylätason komponentille
Oletusarvoisesti