Script setup

¿Cómo utilizar script setup en Vue.js 3?

Con la llegada de Vue.js 3, desarrollar con este framework se ha vuelto más eficiente y sencillo. Una introducción clave es la función script setup, una característica que facilita la definición de componentes en Single File Components, al tiempo que ofrece una sintaxis más limpia y concisa. Al usar script setup, no necesitas crear un export default, ya que todo el código dentro de este bloque es tratado como parte de la función setup. Profundicemos en cómo implementar esta función y las ventajas que ofrece.

¿Cómo refactorizar tu código con script setup?

Al iniciar el uso de script setup, conviene refactorizar el código existente. Supón que tienes un componente complejo con variables, propiedades (props), funciones computadas y más. El primer paso es copiar todo el contenido dentro de setup, exceptuando el return, y colocarlo fuera, dentro del bloque de script setup. Este es un método directo para hacer más limpio y manejable el código.

// Ejemplo de uso de script setup
<script setup>
import { ref, computed } from 'vue';
import { defineProps, defineExpose } from 'vue';

// Definimos las props
const props = defineProps(['username', 'fullname']);

// Usamos ref y funciones computadas
const btn = ref(null);
const fullName = computed(() => `${props.username} ${props.fullname}`);

// Exponemos referencias individuales
defineExpose({ btn });
</script>

¿Cómo definir y utilizar las propiedades con defineProps?

Para acceder a las propiedades en script setup, Vue.js introduce la función defineProps. Esta función te permite declarar y usar las props de manera más funcional y clara, sin la necesidad de definirlas en el export default.

• Uso de defineProps: Esta función permite acceder a las props sin necesidad de reactividad.

const props = defineProps(['username', 'fullname']);

Esta sintaxis respeta la reactividad del framework y permite una gestión más directa de las propiedades del componente.

¿Qué papel juegan las funciones auxiliares como defineExpose?

En un entorno de script setup, funciones como defineExpose son cruciales para exponer elementos específicos del componente a instancias externas. Esto se logra sin el uso del contexto tradicional de Vue.js y simplifica la interacción con otros componentes.

• Aplicación de defineExpose: Permite exponer referencias y variables para su uso por instancias externas.

defineExpose({ btn });

¿Cuáles son las consideraciones actuales de script setup?

Aunque script setup es una innovación prometedora, es vital recordar que se encontraba en fase experimental al momento de su lanzamiento con Vue.js 3. Esto implica que podría haber cambios futuros en la API o ajustes menores. Así que, mantenerse al tanto de las actualizaciones en la documentación oficial de Vue.js es un hábito recomendable para los desarrolladores que adopten estas nuevas funcionalidades.

Solo recuerda que esta sintaxis está dirigida específicamente al uso con single file components y requiere uso de un compilador adecuado. No funcionará si estás utilizando vanilla JS o proyectos con Webpack a menos que utilices la librería específica para ello.

¡Y listo! Ahora estás bien encaminado para aprovechar todo el potencial que script setup en Vue.js 3 tiene para ofrecerte. No dudes en compartir tus experiencias y desafíos al utilizar esta función en el desarrollo de tus proyectos.