setup()-funktionen og script setup
Skriv logik i setup()-funktionen, eller brug -syntakssukkeret, eksponér værdier til templaten, og forstå lifecycle hooks i Composition API.
setup()-funktionen og script setup er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Funktionen setup()
I Vue 3's Composition API er setup() en komponentindstilling, der erstatter data, metoder, computed og watch. Den modtager props og setup-konteksten som argumenter og returnerer det, skabelonen har brug for.
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> — Syntaktisk sukker
<script setup> er syntaktisk sukker ved kompilering for setup(). Alt, der deklareres på øverste niveau, er automatisk tilgængeligt i skabelonen. Der kræves ingen return-sætning.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>Livscyklus-hooks i setup()
Vue 3's livscyklus-hooks er importerede funktioner: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate osv. De kan kaldes flere gange for at registrere flere handlers.
<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>Props i setup()
I setup() er props reaktive. Destrukturér dem ikke direkte – brug toRefs(props), eller tilgå dem via props.x for at bevare reaktiviteten.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() — Eksponering for forælderen
Som standard eksponerer