Si ya has trabajado con Vue.js, sabrás que script setup es una de las novedades de Vue 3 y está pensado para hacerte la vida más fácil, evitando que realices algunas tareas repetitivas.
Estas son las 3 razones por las que yo comenzaría a usarlo ya mismo.
Sin script setup
Pero primero necesitamos algo para comparar: este es un componente típico utilizando el método setup de la Composition
API.
<script>
import {ref} from "vue"
import AppComponent from "./AppComponent.vue"
export default {
setup() {
const message = ref("Hello from Escuela Vue 🔥")
const start = function () { ...
}
return {message, start}
}
components: {AppComponent},
}
</script>
<template>
<AppComponent/>
<button @click="start">{{ message }}</button>
</template>Nada demasiado original, ¿verdad?. Vamos ahora a llevar a su versión con script setup.
Con script setup ⚡️
1. No necesitas declarar el método setup
Como suena, no es necesario crear el método, ya que se entiende que toda la lógica dentro de script forma parte del
setup del componente. Tampoco es necesario entonces el export default asociado.
2. No necesitas declarar components
Esta es mi favorita: no más propiedad componentes: { ... }, basta con que importes los componentes necesarios de la
etiqueta script y Vue automáticamente hará que estén disponibles para utilizar el template.
3. No necesitas retornar nada explícitamente
Como sabes, si usas el método setup tradicional tendrás que, al final, exponer aquella lógica que necesitas, ya sean
valores reactivos, métodos o demás.
Pues bien, todo lo que definas dentro de script setup ya es accesible dentro del template. Ojo, solo de forma local.
Si intentamos acceder desde un componente ancestro no podrás. Te lo explico más adelante.
Teniendo claros estos 3 puntos, este es el mismo componente que te mostré al principio, pero usando script setup 🔥
<script setup>
import {ref} from "vue"
import AppComponent from "./AppComponent.vue"
const message = ref("Hello from Escuela Vue 🔥")
const start = function () { ...
}
</script>
<template>
<AppComponent/>
<button @click="start">{{ message }}</button>
</template>Como ves no hay método setup, ni declaración de componentes, ni tenemos que retornar nada para hacerlo accesible en
el template.
Consideraciones extra
Quizás te estés preguntando cómo hacer ahora algunas tareas que antes hacías usando el método setup y sus parámetros.
Veamos algunas de ellas:
Definir propiedades y lanzar eventos
Si usas script setup tienes acceso
a dos funciones helper para poder designar las propiedades
adecuadas y gestionar los eventos. Son defineProps y defineEmits (fíjate que no se importan).
<script setup>
const props = defineProps({
name: String
})
const emit = defineEmits(['update', 'remove'])
</script>Acceder a slots y atributos
Ocurre lo mismo que con las propiedades y eventos: tenemos helpers a nuestra disposición.
<script setup>
import {useSlots, useAttrs} from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>Exponer lógica hacia fuera
Una de las características de script setup es que cierra hacia fuera la lógica del componente. ¿Qué ocurre entonces si
queremos compartir algún método?. Esto ya lo vimos cuando hablábamos
de cómo llamar un método de un componente hijo. Es tan
sencillo como definir qué queremos hacer visible hacia
fuera.
<script setup>
import {ref} from "vue"
import AppComponent from "./AppComponent.vue"
const message = ref("Hello from Escuela Vue 🔥")
const start = function () { ...
}
defineExpose({ // Ahora son accesibles
message,
start
})
</script>Espero que con este mini tutorial te haya quedado claro algunos beneficios que tiene usar script setup en Vue 3 y que
lo uses desde ahora.
