Vue onBeforeUpdate run after DOM update

[rick-hup]

In a Nuxt app,when I change isChecked=true, Child's onBeforeUpdate hook is triggered. However, when I read the child DOM's clientWidth inside onBeforeUpdate, I get the width after the DOM update instead of before. Is this the expected behavior

[skirtles-code]

It's not clear to me why onBeforeUpdate would be triggered in the example you gave, as it doesn't seem that the child is being updated.

That aside, the callback for onBeforeUpdate will be called before the child is updated but after the parent is updated. It looks like the parent is removing an element, which may cause the width of the child <div> to change.

Hopefully that explains what you're seeing, but it's difficult for me to be sure because I can't run the code myself. Posting pictures of code is not ideal as it makes it much more difficult for people to help you. If you posted the code as text then we could try running it ourselves. Or, even better, you could create a minimal reproduction at https://play.vuejs.org/.

[rick-hup]

Sorry, I created a stackblitz reproduction that shows when a DOM element triggers an enter transition within a Transition component, the onBeforeUpdate hook in components outside the Transition component doesn't fire before the DOM updates as expected, but instead fires after the DOM has already been updated.

[skirtles-code]

I can't run a StackBlitz, it's too resource intensive. I've put the code in a Playground for anyone else interested in investigating this:

• Playground

I'm still not entirely sure why the onBeforeUpdate hook is being called in the child, as nothing is actually changing, but it seems to be caused by the ClientOnly wrapper. Without that wrapper component it doesn't trigger at all, which is what I was expecting.

As for why the width is incorrect, I think the key thing to understand is that onBeforeUpdate gets called before the current component updates, it doesn't provide any guarantees about updates elsewhere in the component tree. The TransitionGroup is updating first, then the Child component. The onBeforeUpdate hook for Child won't be called until Child tries to update, which will be after other components have updated the DOM.

When the v-if changes to true, the new element gets added inside the TransitionGroup, then the Child component updates. When you try to measure the element width it is after the TransitionGroup has updated, so you see the new size, 229.

When the v-if changes to false, the new element isn't immediately removed, because of the TransitionGroup. The Child component updates before the element is actually removed, so you still get a width of 229, rather than 300.

[rick-hup]

when move Child component under Transition. onBeforeUpdate calls correcly. it seems Transition component has scoped update cycle.
this update caused by a vue reactive state changes,
I think onBeforeUpdate hook should be triggered before actual DOM mutations when reactive state changes in Vue.