Subscribe on changes!

Computed property is uselessly recomputed when depending on a injected and computed property.

avatar
Feb 4th 2021

Version

3.0.5

Reproduction link

https://jsfiddle.net/3yw2ghto/10/

Steps to reproduce

Press the two buttons.

What is expected?

The computed property in the child component should not be recomputed when x > 0.

What is actually happening?

The computed property of the child component is recomputed, but it shouldn't (as shown in the browser console).


This seems to happen also with custom directives: the "updated" hook is triggered, even if the value has not changed, and neither the argument, when the binding's value is taken from a computed property depending on injected objects.

avatar
Feb 4th 2021

About computed:

That's expected behavior. Computed properties are evaluated lazily, which means: the function is run only once the computed property is actually being read.

As a consequence, if one computed property A depends on another computed property B, and B updates, then A will always update as well - wether or not the new value of B is actually different to the old one.

About custom directives:

This is also expected behavior, but for a totally different reason: You misunderstand how the updated hook works. It runs when the component updates, it's not related to the binding.value at all.