Vue - timing of child computed vs. parent computed

Tobias Feil 0
Viewed 33

Components <parent> and <child> both reference a property in Vuex via computed. <parent> has a v-if that prevents <child> from being rendered if the property is null. <child>, in turn, relies on the property not being null and throws an error if it is.

Now when I set the property to null in Vuex, the <child> throws an error because the property is null. So apparently, the child's computed is evaluated before the parent's. This is against my expectation, as I would have thought the parent's computed gets evaluated first, sees that the value is null, and then doesn't render the child anymore which in turn doesn't error.

How do I know which computed's are evaluated first, since I can't find any docs about it, and is there a way to influence the order?

vuex vuejs3 vue.js javascript
1 Answers

This scenario generally shouldn't be allowed because this may in unintended race condition. The order in which parent and children components are updated is not documented but can be observed based on the actual behaviour.

mounted lifecycle is known to be ordered from a child to a parent, so update could be expected to be ordered the same way. Also v-if can provide additional delay because the changes are applied on component update.

v-if can be either moved to a child, or a value that a child depends can be passed through a prop instead of being accessed from a store directly, since it's already available in parent template and used in v-if.

Estus Flask0
Related