Nuxt•2y 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);
}

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

product.value

product.value

product.value is not changing. Somehow magically it knows when the return value of

isProductExcluded

isProductExcluded

isProductExcluded

isProductExcluded is different and it is relaunching whole computed.

How to debug computed property

Similar Threads

Similar Threads

Similar Threads