La función setup() y script setup
Escriba lógica en la función setup() o use la sintaxis simplificada , exponga valores al template y comprenda los hooks del ciclo de vida en la Composition API.
La función setup() y script setup es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
La función setup()
En la Composition API de Vue 3, setup() es una opción del componente que reemplaza a data, methods, computed y watch. Recibe props y el contexto de setup como argumentos, y devuelve lo que necesita la plantilla.
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> — Azúcar sintáctico
<script setup> es azúcar sintáctico en tiempo de compilación para setup(). Todo lo declarado en el nivel superior está disponible automáticamente en la plantilla. No se necesita una instrucción return.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>Hooks del ciclo de vida en setup()
Los hooks del ciclo de vida de Vue 3 son funciones importadas: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, etc. Se pueden llamar varias veces para registrar varios controladores.
<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 de setup()
En setup(), las props son reactivas. No las desestructure directamente; use toRefs(props) o acceda a ellas mediante props.x para mantener la reactividad.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() — Exponer al componente padre
De forma predeterminada, los componentes