Excelente el uso de script setup! leyendo la página oficial de vue https://vuejs.org/api/sfc-script-setup.html dice que al usar script setup mejora el rendimiento en tiempo de ejecución. Y tiene muchos beneficios más…
Introducción
¿Qué aprenderás en este curso?
Introducción a Vue CLI
Estructura del proyecto
Built-in Components
Componentes dinámicos
Componentes asíncronos
Transiciones
Teleports
Componentes personalizados
Virtual DOM
Entendiendo el ciclo de vida de los componentes
Explorando los primeros hooks del ciclo de vida de Vue
Mixins
Composition API
Introducción a Composition API
Ciclo de vida en Composition API
Variables reactivas con ref y reactive
Watch
Computed
Uso de props
Uso de context
Provide / Inject
Template refs
Composition vs. Options
Script setup
Cierre del curso
Hora de poner tu conocimiento en práctica
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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>
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
.
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.
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.
defineExpose
: Permite exponer referencias y variables para su uso por instancias externas.defineExpose({ btn });
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.
Aportes 4
Preguntas 0
Excelente el uso de script setup! leyendo la página oficial de vue https://vuejs.org/api/sfc-script-setup.html dice que al usar script setup mejora el rendimiento en tiempo de ejecución. Y tiene muchos beneficios más…
Cuando se requiere leer props utilizando el <script setup>, no es necesario importar defineProps(), Vue ya lo trae incorporado como una función interna, por lo que la puedes utilizar directamente.
Un detalle que he descubierto en un proyecto. utilizar script setup puede crear conflictos al usar librería de tercero al realizar unit testing. En este caso me paso con ionic y skeleton-elements.
Validar desde el inicio realizando unit testing si no se encuentra el mismo conflicto el cual durante el testing no puede renderizarlo y sale “<!–[object]–>” o “<anonymus …”.
Amazing!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?