Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

193
Vistas
¿Cómo sabe el "computado" de Vue qué campos se actualizaron?

Creé este ejemplo mínimo para mostrar lo que no entiendo sobre el motor de reactividad de Vue.

 <script setup> import { ref, computed } from 'vue' const obj = ref({ some: { value: 1, nested: { prop: 1 } } }) const dep1Changed = ref(0) const dep2Changed = ref(0) const dep1 = computed(() => { console.log('dep1') dep1Changed.value++ return obj.value.some.nested.prop + 1 }) const dep2 = computed(() => { console.log('dep2') dep2Changed.value++ let lvl = obj.value // IT ACCESSES .some, BUT THE REACTIVITY ENGINE DOESN'T CARE! lvl = lvl.some // Rightfully so, BUT WHY? And how does it do it!? lvl = lvl.nested lvl = lvl.prop return lvl + 1 }) </script> <template> <p>dep1 changed: {{ dep1Changed }}</p> <p>dep2 changed: {{ dep2Changed }}</p> <h1>{{ dep1 }}</h1> <h1>{{ dep2 }}</h1> <h1>{{ obj.some.value }}</h1> <button @click="obj.some.nested.prop++">incr</button> <button @click="obj.some.value++">incr some.value</button> </template>

En resumen, hay un objeto reactivo profundamente anidado obj y valores computed dep1 y dep2 , que acceden a obj.value.some.nested.prop cada uno de una manera ligeramente diferente (ver la implementación). Y cada vez que estos valores computed se recalculan, incrementan dep1Changed y dep2Changed respectivamente (sé que los efectos secundarios en el computed son un antipatrón, pero tengan paciencia conmigo).

Cada vez que incrementamos el valor de some.nested.prop , tanto dep1 como dep2 recalculan correctamente para crear un nuevo valor almacenado en caché. Traté de engañar al motor de reactividad para que recalculara dep2 introduciendo some.value , que se incrementa con otro botón. Parece que Vue debería pensar que dep2 depende de some niveles nested y prop del objeto, ya que se accede a ellos por separado. Esto significaría que siempre que cambie dep2 some.value debería recalcularse. ¡Pero no es así! ¡ Sabe que solo depende del prop de alguna manera !

Y no me malinterpreten, no es algo malo en absoluto, es algo increíblemente bueno , pero está hecho de manera tan inteligente e inteligente que no puedo entender cómo se logró.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda