3 razones para usar script setup Vue 3

Si trabajas con Vue 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.