La funzione setup() e script setup
Scrivere la logica nella funzione setup() o usare lo zucchero sintattico , esporre i valori al template e comprendere gli hook del ciclo di vita nella Composition API.
La funzione setup() e script setup è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
La funzione setup()
Nella Composition API di Vue 3, setup() è un'opzione del componente che sostituisce data, methods, computed e watch. Riceve props e il contesto di setup come argomenti e restituisce ciò di cui il template ha bisogno.
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> — Sintassi semplificata
<script setup> è una sintassi semplificata a tempo di compilazione per setup(). Tutto ciò che viene dichiarato al livello superiore è automaticamente disponibile nel template. Non è necessaria alcuna istruzione return.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>Hook del ciclo di vita in setup()
Gli hook del ciclo di vita di Vue 3 sono funzioni importate: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, ecc. Possono essere chiamati più volte per registrare più gestori.
<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 di setup()
In setup(), props sono reattive. Non le destrutturi direttamente: usi toRefs(props) oppure acceda tramite props.x per mantenere la reattività.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() — Esposizione al componente padre
Per impostazione predefinita, i componenti