Nuxt•8mo ago

How to debug computed property

I have very weird case of "it is working, but I don't know why". And I don't know how to properly debug computed properties and find what exactly triggered them. It will be hard for me to provide a link for reproduction, but I will try to describe my setup in simplified terms. I have a component with a computed like this:

const { product } = toRefs(props);
const { isProductExcluded } = useProductExcluded();

const shouldShowProduct = computed(() => { // tiggered for seemingly no reason
  console.log('recalculate computed');
  return !isProductExcluded(product.value);
}

const { product } = toRefs(props);
const { isProductExcluded } = useProductExcluded();

const shouldShowProduct = computed(() => { // tiggered for seemingly no reason
  console.log('recalculate computed');
  return !isProductExcluded(product.value);
}

And I don't know why this computed is triggering, even though product.value is not changing. Somehow magically it knows when the return value of isProductExcluded is different and it is relaunching whole computed.

9 Replies

GumaaOP•8mo ago

This isProductExcluded function looks something like this (not exactly the same, but data flow is similar):

const { excludedRules } = useExcludedRules();

const ruleA = computed(() => excludedRules[0]);
const ruleB = computed(() => excludedRules[1]);
const ruleC = computed(() => excludedRules[2]);

const isProductExcluded = (product: Maybe<ProductVariant>) => {
  return isConditionTrue(product, ruleA.value) || 
    isConditionTrue(product, ruleB.value) || // this rule is changing
    isConditionTrue(product, ruleC.value);
};

const { excludedRules } = useExcludedRules();

const ruleA = computed(() => excludedRules[0]);
const ruleB = computed(() => excludedRules[1]);
const ruleC = computed(() => excludedRules[2]);

const isProductExcluded = (product: Maybe<ProductVariant>) => {
  return isConditionTrue(product, ruleA.value) || 
    isConditionTrue(product, ruleB.value) || // this rule is changing
    isConditionTrue(product, ruleC.value);
};

So I'm sending an async call to get the rules. Some time later I'm getting the response and I'm returning it as excludedRules. Then all the computed properties for rules are correctly recalculated. But at the point I got the response from the backend my component is already rendered and the function isProductExcluded already returned a value. product.value is already there and it is not changing. So even if now I have the needed data it shouldn't run. But it does! I even added artificial 10 second delay to the request to get excludedRules . Everything is rendered as it should, then data comes 10 seconds later, and it recalculates shouldShowProduct even when it should be impossible for Vue to do it, because this data is not a dependency of this computed. I'm questioning my sanity at that point a little bit. How do I debug this? How can I check what exactly is triggering this computed for shouldShowProduct? I don't think there is any way that Vue is somehow deeply checking dependencies of a function to check if computed needs rerunning? Or does it?

manniL•8mo ago

@Gumaa check out onRenderTracked and onRenderTriggered

manniL•8mo ago

https://vuejs.org/guide/extras/reactivity-in-depth.html

Vue.js

Vue.js - The Progressive JavaScript Framework

manniL•8mo ago

or for the specific computed onTrack / onTrigger

const plusOne = computed(() => count.value + 1, {
  onTrack(e) {
    // triggered when count.value is tracked as a dependency
    debugger
  },
  onTrigger(e) {
    // triggered when count.value is mutated
    debugger
  }
})

const plusOne = computed(() => count.value + 1, {
  onTrack(e) {
    // triggered when count.value is tracked as a dependency
    debugger
  },
  onTrigger(e) {
    // triggered when count.value is mutated
    debugger
  }
})

GumaaOP•8mo ago

Thanks for the response. Do you know if it is available for Vue 2? I'm checking right now docs for it but I can't find it I'm using Vue 2.6 with composition api package Ok, I've found that onRenderTracked and onRenderTriggered are not supported 😦 onTrack / onTrigger are also not available 😭

manniL•8mo ago

ohh, for vue 2 yeah, bad luck with that 🙈 you could still watch all dependencies (with an immediate watcher) and check

GumaaOP•8mo ago

I mean the computed is pretty much only a call to this function !isProductExcluded(product.value), so I could try and setup a watcher just for product. I'm pretty sure it is not changing, but I will make sure with a watcher. Btw. how watcher being "immediate" helps in that scenario? I did something like this:

watch(product, (newValue, oldValue) => {
  console.log({ oldValue, newValue });
}, { immediate: true });

watch(product, (newValue, oldValue) => {
  console.log({ oldValue, newValue });
}, { immediate: true });

And it is printing when product has changed for the first time. But then after 10 seconds had passed and the request with the rules came back, it is not logging anything, and yet the computed just fires magically. So it really seems like it is deeply tracking dependecies of a function that it is calling.

GumaaOP•8mo ago

Ok, I was able to strip down everything and I think I have a representative minimal reproduction setup: https://stackblitz.com/edit/vue2-vue-cli-2ukgog?file=src%2FApp.vue,src%2Fmain.js I always believed that Vue does not track dependecies of a function like this. But it seems it does. I can not find any mention of this anywhere honestly.

StackBlitz

Vue2.6.14 + Vue CLI Starter + @vue/composition-api (forked) - Stack...

[vue2] Vue 2 SFCs with Vue CLI starter

manniL•8mo ago

this also applies to vue 3 btw - https://play.vuejs.org/#eNp9U01zmzAQ/StbXYxnPDCZ9pRit4knh/bQdpocuVBYQIksMfqw3SH8964E2MRNwjCw2n27b99K6thN28Z7h+yapRZ3rcgtbjIJkJZ8Hwwym6tN14FplBPlfaMO0PdpQs4x/MdZqyR8LQQvntYZU3LrrWiZsU3wpckAGQonQ+U0mfHR0hSat5ZsvmuVttBBiRWXuFW0lijtCjRWKyho7SyW0EOl1Q4W1P3isy+Bx5BIabkT4T9Pj7pMGrSujZZAJlAhaaz/ltxyJW9g7QmiKhcGl1TwP8TtJeKM4WY7oR60QwJGrValK+wS1puBzz+aGtByRhrvc0H45+cZzeALHfQvWGY7sD7NISI9ngKSBA7NX2oFuAWreV2jxvLLRO1LKIGxUHW00FjkonB++mfixQquBuGzVi+URROg97+XQxj33Yufq74URvEPr4sdio3EY/ZZ82pwjCxjgn99F2lyOj9sxawhgorX8aNRko52qJUxPzIuUP9sPbXJ2PXEkrFcCHX4HnyWdI5klNNg8fSK/9EcvS9jvzQa1HvM2Clmc12jHcJ39z/wSPYpuKNjIQj9TvA30k453+MAu3WypLZnuNDtt3BRuKwfzN3RojSTKN9omE/AZ4xuiL8Gb0k/t/sx/jTNlfX/AEKtYGs=

Gaming

Programming

How to debug computed property