Vue Academy · Lección

Función setup() y variables reactivas

El punto de entrada setup(), ref() para primitivas, reactive() para objetos y devolución de valores.

Lección 2 de 413 pasos

Función setup() y variables reactivas es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

El punto de entrada setup()

Composition API se encuentra dentro de una opción especial del componente llamada setup(). Se ejecuta una vez, antes de que se cree el componente, y es donde se declaran el estado reactivo y las funciones.

Todo lo que return desde setup() queda disponible en la plantilla.

Crear estado reactivo con ref

ref() envuelve un único valor (un número, una cadena, un booleano o incluso un objeto) en un contenedor reactivo. El valor real se encuentra en la propiedad .value.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

Crear objetos reactivos con reactive

reactive() recibe un objeto normal y devuelve un proxy profundamente reactivo. Se accede directamente a sus propiedades; no existe .value.

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

Devolver el estado a la plantilla

Todo lo que se devuelve desde setup() como objeto se convierte en un binding de la plantilla. En este caso, tanto count como user quedan expuestos.

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

Desenvoltura automática en la plantilla

En JavaScript ha escrito count.value. En la plantilla solo escribe count. Vue desenvuelve automáticamente los refs de nivel superior, por lo que nunca escribe .value en la plantilla.

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

Añadir funciones

Las funciones definidas en setup() pueden leer y modificar el estado reactivo. Recuerde que dentro de JavaScript debe seguir utilizando .value para los refs.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}

Conectarlo en la plantilla

Devuelva la función y vincúlela a un evento. Al hacer clic en el botón se llama a increment, que modifica el ref, y Vue vuelve a renderizar.

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

No se necesita la palabra clave this

Dentro de setup() no existe this. Trabaja directamente con las variables que ha declarado. Esto facilita comprender el código y mejora la compatibilidad con TypeScript.

Intentar utilizar this en setup() no le proporciona la instancia del componente.

setup se ejecuta antes de la creación

setup() se ejecuta muy pronto: antes de created y antes de que la instancia del componente esté completamente configurada. Por eso this no está disponible y todavía no puede acceder al DOM desde aquí.

Argumentos de setup(): props y context

setup(props, context) recibe las props resueltas como primer argumento y un objeto de contexto como segundo. El contexto expone attrs, slots, emit y expose.

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

Un componente pequeño completo

Aquí está todo junto: un ref, un objeto reactivo, una función y los bindings devueltos.

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

Comprobación rápida

Asegúrese de comprender setup() y las variables reactivas.

Responde en la lección interactiva

Repaso

Ha aprendido los fundamentos de Composition API:

setup() se ejecuta una vez antes de la creación y devuelve bindings para la plantilla.
ref() envuelve un valor; utilice .value en JS.
reactive() envuelve un objeto; acceda directamente a sus propiedades.
Las plantillas desenvuelven automáticamente los refs, por lo que allí no necesita .value.
No existe this dentro de setup().

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 42
Lecciones: 156

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Función setup() y variables reactivas» es gratis?

Sí — el texto completo de «Función setup() y variables reactivas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Función setup() y variables reactivas»?

El punto de entrada setup(), ref() para primitivas, reactive() para objetos y devolución de valores. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Función setup() y variables reactivas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

¿Por qué Composition API?
Función setup() y variables reactivas
ref frente a reactive: cuándo usar cada uno
Computed y watch en Composition API

← Volver a Vue Academy