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ó.