Funktionen setup() och script setup
Skriv logik i funktionen setup() eller använd -syntaxen, exponera värden för templaten och förstå livscykel-hooks i Composition API.
Funktionen setup() och script setup är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Funktionen setup()
I Vue 3:s Composition API är setup() ett komponentalternativ som ersätter data, methods, computed och watch. Den tar emot props och setup-kontexten som argument och returnerar det som mallen behöver.
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> – Syntaktiskt socker
<script setup> är syntaktiskt socker på kompileringstid för setup(). Allt som deklareras på toppnivå är automatiskt tillgängligt i mallen. Ingen return-sats behövs.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>Livscykel-hooks i setup()
Vue 3:s livscykel-hooks är importerade funktioner: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate med flera. De kan anropas flera gånger för att registrera flera 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() är props reaktiva. Destrukturera dem inte direkt – använd toRefs(props) eller kom åt dem via props.x för att bevara reaktiviteten.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() – exponera för överordnad komponent
Som standard exponerar