El argumento context en Vue 3 setup

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:33

El argumento context en Vue 3 setup

Curso de Vue.js: Componentes y Composition API

Clase 18 de 23

Clase 18 / 23

Recursos

El segundo argumento de la función setup() en Vue 3 se llama context y te entrega cuatro herramientas clave para trabajar con tu componente sin depender de this. Si vienes de Options API y estás migrando a Composition API, entender context es lo que te permite emitir eventos, leer atributos no declarados y exponer datos hacia componentes padres.

Qué recibe el argumento context en la función setup

Cuando imprimes context con un console.log, Vue.js te devuelve un objeto con cuatro propiedades: attrs, emit, expose y slots. Cada una resuelve un caso de uso distinto que antes hacías con la sintaxis tradicional del framework.

¿Qué es context en Vue 3? Es el segundo parámetro de setup() que expone attrs, emit, expose y slots para que puedas interactuar con el componente sin usar this.

Puedes acceder a estas propiedades con notación de punto o con destructuración de ECMAScript, lo que te dé más comodidad al escribir.

Cómo funcionan attrs y emit dentro de context

La propiedad attrs contiene todo lo que el componente recibe desde fuera y que no fue declarado como prop. Si en el componente padre pasas firstName y lastName como props declarados, Vue los registra como tales. Pero si añades algo como otro="algo" sin declararlo, ese valor cae en attrs. La diferencia importante: attrs no es reactivo, aunque sí puedes leerlo dentro del componente.

La función emit reemplaza al clásico this.$emit que usabas en Options API. Funciona igual: recibe el nombre del evento como primer argumento y la carga útil como segundo. La única diferencia visible es que ya no escribes el símbolo de dólar.

attrs: lee atributos HTML que no son props.
emit: dispara eventos personalizados hacia el componente padre.
slots: accede al contenido inyectado vía slots.
expose: publica valores internos para que sean visibles desde fuera.

Para qué sirve expose y cómo se publica un valor

La función expose se ejecuta una sola vez dentro de setup() y sirve para hacer públicas variables que normalmente vivirían encerradas en el contexto de la función. Si creas un fullName dentro de setup(), ese valor no es accesible desde un componente padre, a menos que lo expongas.

La sintaxis es directa: llamas a expose() y le pasas un objeto con los valores que quieres publicar, por ejemplo expose({ fullName }). Desde ese momento, otros componentes pueden leer ese dato.

Por qué setup no tiene acceso a this ni al ciclo de vida tradicional

La función setup() se ejecuta antes del ciclo de vida del componente, así que hay cosas de Options API que simplemente no existen ahí. No puedes usar this para referirte a la instancia, y eso bloquea el acceso a varias propiedades.

Lo que queda fuera del alcance de setup():

El atributo el y la referencia refs de la instancia.
La función data y el objeto $data.
Las propiedades computed definidas como Options API.
Los methods declarados con la sintaxis tradicional.

¿Por qué no funciona this dentro de setup? Porque setup() corre antes de que la instancia del componente exista, así que no hay un this al cual apuntar.

Cómo reemplazar methods usando JavaScript puro

En lugar de declarar methods, defines funciones normales de JavaScript dentro de setup(). Algo tan simple como const miFuncion = () => { console.log('función') } te basta. Después puedes combinarla con un computed, con un watcher, devolverla en el return o publicarla con expose.

El beneficio es claro: escribes Vanilla JS sin sintaxis adicional del framework. Y obtienes el mismo resultado que tenías con methods en Options API.

Cómo manejar reactividad cuando modificas datos en setup

Como setup() no participa del ciclo de vida tradicional, cualquier modificación a datos debe pasar por el sistema de reactividad de Composition API. Eso significa apoyarte en utilidades como toRefs, computed y compañía.

Es el mismo principio que aplicaste con props: no puedes leerlos directamente esperando reactividad, primero los conviertes en una referencia reactiva. Si te saltas ese paso, los cambios no se reflejan en la vista.

La regla práctica: envuelve siempre los datos mutables en un objeto reactivo usando Composition API. Con eso resuelto, el resto de la sintaxis se siente mucho más cercana a JavaScript puro y te quitas capas innecesarias del framework.

¿Ya probaste exponer un valor con expose en alguno de tus componentes? Cuéntame en los comentarios cómo lo estás aplicando.