Simplificar la definición de componentes en Vue.js 3 es posible gracias a una característica que transforma por completo la forma en que escribes código con Composition API. Se trata de script setup, un atributo que puedes agregar directamente al tag <script> en tus Single File Components y que elimina la necesidad de escribir un export default con una función setup explícita. El resultado es un código más limpio, más cercano a JavaScript puro y completamente funcional.
¿Qué es script setup y por qué simplifica tu código?
Cuando trabajas con Composition API en archivos .vue, normalmente defines un export default que contiene la función setup, donde declaras props, variables reactivas, funciones computadas, watchers y finalmente retornas todo lo que el template necesita. Con script setup, todo lo que escribas dentro del tag <script setup> se comporta como si estuviera dentro de esa función setup [0:48].
Esto significa que:
- Ya no necesitas el bloque
export default.
- No es necesario hacer
return de las variables y funciones.
- Todas las constantes y variables declaradas quedan automáticamente disponibles en el template.
- El código se ve como programación funcional pura, manteniendo la reactividad de Vue.js.
Por ejemplo, si tenías una const fullName o una referencia como const btn, estas quedan expuestas al template sin necesidad de retornarlas explícitamente [2:15].
¿Cómo se definen los props con defineProps?
Uno de los cambios importantes al migrar a script setup es la forma de declarar props. En lugar de definirlos dentro del objeto de opciones, se utiliza la función defineProps [2:50]. Esta función recibe la misma configuración que usabas en Options API, pero en forma funcional.
javascript
const props = defineProps({
firstName: String,
lastName: String
})
Lo que devuelve defineProps es exactamente el objeto props que antes recibías como argumento de la función setup. Si necesitas acceder a los props de forma reactiva, sigues utilizando toRefs tal como lo hacías antes [3:25].
¿Cómo funciona defineExpose en script setup?
Cuando usabas el objeto context dentro de la función setup, tenías acceso a métodos como expose. Ahora, en script setup, existe una función equivalente llamada defineExpose [3:50]. En lugar de invocar context.expose(), simplemente llamas a defineExpose como función independiente:
javascript
defineExpose({
btn
})
Esto permite controlar qué propiedades o métodos del componente quedan accesibles desde componentes padre mediante template refs.
¿Qué restricciones tiene script setup?
Una restricción fundamental es que no puedes combinar script setup con un export default dentro del mismo archivo [4:15]. Vue no sabría qué exportar: si lo definido dentro del tag <script setup> o lo que aparece en el export default. Por eso, al adoptar esta sintaxis, debes eliminar completamente el bloque de exportación tradicional.
Otra consideración importante es que script setup solo funciona con Single File Components y requiere el compilador correspondiente [5:30]. No es posible utilizar esta sintaxis en un proyecto con JavaScript puro o con una configuración de webpack que no incluya el loader para archivos .vue.
¿Es estable script setup para proyectos en producción?
Al momento de la grabación, esta sintaxis se encontraba en fase de pruebas dentro de Vue.js 3 [5:05]. Sin embargo, su aceptación ha sido amplia en la comunidad y es muy poco probable que sufra cambios significativos. La recomendación es mantenerse actualizado consultando la documentación oficial en vuejs.org, donde cualquier modificación al API quedaría reflejada.
El concepto de azúcar sintáctico (syntactic sugar) describe exactamente lo que script setup ofrece: una forma más concisa de escribir lo mismo, sin perder funcionalidad. Todo lo que aprendiste sobre Composition API —refs, computed, watch, inject— sigue funcionando exactamente igual, pero ahora dentro de un bloque de código que parece JavaScript estándar.
Si ya estás trabajando con Vue.js 3 y Single File Components, cuéntanos en los comentarios qué te parece esta forma de definir componentes usando únicamente funciones.
