Die Funktion setup() und script setup
Schreiben Sie Logik in der Funktion setup() oder verwenden Sie das -Kurzformat, stellen Sie Werte im Template bereit und verstehen Sie Lifecycle-Hooks in der Composition API.
Die Funktion setup() und script setup ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Die Funktion setup()
In der Composition API von Vue 3 ist setup() eine Komponentenoption, die data, methods, computed und watch ersetzt. Sie erhält die Props und den Setup-Kontext als Argumente und gibt zurück, was das Template benötigt.
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> — Syntax-Zucker
<script setup> ist Syntax-Zucker zur Kompilierzeit für setup(). Alles, was auf der obersten Ebene deklariert wird, ist automatisch im Template verfügbar. Eine return-Anweisung ist nicht erforderlich.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>Lebenszyklus-Hooks in setup()
Die Lebenszyklus-Hooks von Vue 3 sind importierte Funktionen: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate usw. Sie können mehrfach aufgerufen werden, um mehrere Handler zu registrieren.
<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 in setup()
In setup() sind Props reaktiv. Destrukturieren Sie sie nicht direkt — verwenden Sie toRefs(props) oder greifen Sie über props.x darauf zu, damit die Reaktivität erhalten bleibt.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() — Für die übergeordnete Komponente freigeben
Standardmäßig geben