La fonction setup() et script setup
Écrivez la logique dans la fonction setup() ou utilisez le sucre syntaxique , exposez des valeurs au template et comprenez les hooks du cycle de vie dans l’API Composition.
La fonction setup() et script setup est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
La fonction setup()
Dans l'API de composition de Vue 3, setup() est une option de composant qui remplace les données, les méthodes, les valeurs calculées et la surveillance. Elle reçoit les props et le contexte de configuration comme arguments, puis retourne ce dont le template a besoin.
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> — Sucre syntaxique
<script setup> est un sucre syntaxique évalué à la compilation pour setup(). Tout ce qui est déclaré au niveau supérieur est automatiquement disponible dans le template. Aucune instruction return n'est nécessaire.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>Les hooks de cycle de vie dans setup()
Les hooks de cycle de vie de Vue 3 sont des fonctions importées : onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, etc. Vous pouvez les appeler plusieurs fois pour enregistrer plusieurs gestionnaires.
<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>Les props de setup()
Dans setup(), les props sont réactives. Ne les déstructurez pas directement : utilisez toRefs(props) ou accédez-y via props.x pour conserver la réactivité.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() — Exposer des éléments au parent
Par défaut, les composants