0Pricing
Vue Academy · Lección

Reactividad avanzada: shallowRef y triggerRef

shallowRef para mejorar el rendimiento, markRaw para excluir de la reactividad y triggerRef para activar manualmente la actualización

Reactividad avanzada: shallowRef y triggerRef es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 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.

Más allá de ref y reactive

La reactividad profunda de Vue resulta práctica, pero no siempre es lo que necesita. Para objetos grandes o instancias externas, el seguimiento profundo es innecesario. Vue ofrece shallowRef, triggerRef y markRaw para controlarlo con precisión.

Cómo ref realiza el seguimiento profundo

Un ref normal que contiene un objeto hace que todo el objeto sea profundamente reactivo: modificar cualquier propiedad anidada desencadena actualizaciones. Es excelente para estados pequeños, pero costoso para estructuras grandes.

import { ref } from "vue"

const user = ref({ name: "Ada", prefs: { theme: "dark" } })
user.value.prefs.theme = "light" // triggers update (deep)

shallowRef: solo .value es reactivo

shallowRef realiza el seguimiento de la reasignación de .value, pero no realiza el seguimiento de las mutaciones dentro del valor contenido. Los cambios internos no desencadenan renderizados.

import { shallowRef } from "vue"

const state = shallowRef({ count: 0 })
state.value.count++        // does NOT trigger update
state.value = { count: 1 } // DOES trigger (new .value)

Cuándo utilizar shallowRef

Utilícelo para datos grandes y prácticamente inmutables que reemplace por completo, o para envolver objetos externos (una instancia de gráfico o un conjunto de datos grande) cuando el seguimiento profundo añade sobrecarga sin aportar beneficios.

const chart = shallowRef(null)
// chart.value = new Chart(...) replaces wholesale

El problema de las mutaciones profundas

A veces SÍ se muta dentro de un shallowRef (por rendimiento), pero aun así se necesita volver a renderizar en un momento controlado. Vue no puede detectar el cambio, por lo que la interfaz queda desactualizada.

const list = shallowRef([1, 2, 3])
list.value.push(4) // mutated, but no update fires

triggerRef: Forzar una actualización

triggerRef fuerza manualmente a que los efectos que dependen de un shallow ref se vuelvan a ejecutar después de haber mutado su contenido. Se agrupan muchas mutaciones y después se activa una sola vez.

import { shallowRef, triggerRef } from "vue"

const list = shallowRef([1, 2, 3])
list.value.push(4)
list.value.push(5)
triggerRef(list) // now the UI updates

Un patrón de rendimiento

El patrón consiste en mantener una estructura grande en shallowRef, mutarla libremente sin el coste de reactividad de cada cambio y luego llamar a triggerRef una sola vez cuando quiera que la vista refleje el conjunto de cambios.

function bulkUpdate(rows) {
  for (const r of rows) data.value.push(r) // cheap
  triggerRef(data)                         // one update
}

markRaw: excluir por completo

markRaw marca un objeto para que Vue nunca lo convierta en reactivo, ni siquiera dentro de un reactive o un ref normal. Úselo con instancias de clases de terceros que no deban envolverse en un proxy.

import { markRaw, reactive } from "vue"

const state = reactive({
  map: markRaw(new ThirdPartyMap()),
})
// state.map is the raw instance, never a proxy

Por qué es importante markRaw

Envolver instancias complejas de clases (mapas, editores, websockets) en un proxy reactivo puede romper sus referencias internas o provocar errores sutiles. markRaw las mantiene intactas mientras siguen formando parte del estado reactivo.

Combinar las herramientas

Estas herramientas se pueden combinar: un shallowRef que contiene una instancia marcada con markRaw le proporciona un espacio que puede reemplazar de forma reactiva, mientras que Vue nunca convierte el objeto interno en un proxy; es ideal para integraciones externas.

const editor = shallowRef(null)
function init(el) {
  editor.value = markRaw(new CodeEditor(el))
}

Coste de reactividad frente a control

La contrapartida es la siguiente: la reactividad profunda no requiere esfuerzo, pero es más pesada; las API superficiales le proporcionan control y rendimiento, a cambio de que tenga que activar las actualizaciones manualmente. Recurra a ellas solo cuando el perfilado demuestre que son necesarias.

Comprobación rápida

Compruebe su comprensión de la reactividad avanzada.

Resumen

Ha aprendido controles avanzados de reactividad:

  • shallowRef reacciona solo a la reasignación de .value, no a las mutaciones internas; es útil para datos grandes o externos.
  • triggerRef fuerza manualmente las actualizaciones después de mutar el contenido de un shallow ref (agrupe los cambios y actívelos una sola vez).
  • markRaw excluye permanentemente un objeto de la reactividad; es ideal para instancias de clases de terceros.
  • Estas herramientas ofrecen rendimiento y control, a cambio de que tenga que activar las actualizaciones manualmente.

Preguntas frecuentes

¿La lección «Reactividad avanzada: shallowRef y triggerRef» es gratis?

Sí — el texto completo de «Reactividad avanzada: shallowRef y triggerRef» 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 «Reactividad avanzada: shallowRef y triggerRef»?

shallowRef para mejorar el rendimiento, markRaw para excluir de la reactividad y triggerRef para activar manualmente la actualización 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 1 de 4.

¿Cuánto tiempo toma la lección «Reactividad avanzada: shallowRef y triggerRef»?

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

  1. Reactividad avanzada: shallowRef y triggerRef
  2. Factorías de composables y composables parametrizados
  3. Máquinas de estados con XState en Vue
  4. effectScope para agrupar efectos
← Volver a Vue Academy