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

198
Vistas
How does Vue's "computed" know which fields were updated?

I've created this minimal example to show what I do not understand about reactivity engine of 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>

In short, there is a deeply nested reactive object obj and computed values dep1 and dep2, which access the obj.value.some.nested.prop each in a slightly different way (see the implementation). And each time these computed values get recalculated, they increment dep1Changed and dep2Changed counts respectively (I know, that side effects in computed are an antipattern, but bear with me).

Whenever we increment the some.nested.prop value, both dep1 and dep2 rightfully recalculate to create a new cached value. I tried to fool the reactivity engine into recalculating dep2 by introducing some.value, which is incremented with another button. It seems like Vue should think that dep2 is dependent on some, nested and prop levels of the object, since they are accessed separately. This would mean that whenever some.value changes, dep2 should recalculate too. But it doesn't! It knows it's only dependent on prop somehow!

And don't get me wrong, it's not a bad thing at all, it's an incredibly good thing, but it's so smartly and cleverly done that I cannot wrap my head around how it was achieved!

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