Version

3.0.4

Reproduction link

https://codepen.io/fomalhaut79/pen/LYRWGaZ

Steps to reproduce

1. Open reproduction link
2. Click "Add" button
3. There are no logs in the console

What is expected?

Like with the same example but using Vue2 (https://codepen.io/fomalhaut79/pen/ExgWKPP) I expect beforeUpdate and updated methods being called

What is actually happening?

Nothing

If component is not wrapped in a transition all works as expected

Your beforeUpdate and updated hooks is bind to test-component， your code generate a tree like this test-component>Transition>BaseTransition.

Update is less granular，it just update BaseTransition.

I am not sure if it is expected behavior.

I thought again, there has no workaround about this scene, so it will be fix but i am not sure if should to notice parents when there has Transition.

Your beforeUpdate and updated hooks is bind to test-component， your code generate a tree like this test-component>Transition>BaseTransition.

Update is less granular，it just update BaseTransition.

I am not sure if it is expected behavior.

I thought again, there has no workaround about this scene, so it will be fix but i am not sure if should to notice parents when there has Transition.

Not only transition, any component has <slot /> may cause the behavior.

For example <div><slot /></div>

Not only transition, any component has may cause the behavior.

Thank you and i found that too, so it seems a expected behavior because vue update granularity is components.

But there is no good reason for explaining the difference between Vue2 and Vue3.

Not only transition, any component has may cause the behavior.

Thank you and i found that too, so it seems a expected behavior because vue update granularity is components.

But there is no good reason for explaining the difference between Vue2 and Vue3.

Try to explain:

In vue2, the slot content is an array and is created in parent's render phase (in most cases). So the data deps inside slot is collected as itself's deps (which can cause some performance issues). When data updates the component itself will update.

In vue3, the slot content is wrapped inside a function and is created in children's render phase. So the data deps inside slot is collected as its children's deps. When data updates only the components which have used it will update.

Make lots of sense.

@fomalhaut79 if you want to do something in beforeUpdate/updated hooks, you can wrap like Transition > CustomeComponent > code , and move hooks callbacks to CustomeComponent .

This is expected behaviour as all slots in Vue 3 are now scoped slots, for which reactive dependencies within the slot content are collected in the child, as @07akioni correctly explained.

There are mutlitple way to deal with this, i.e. watching the data in question or using the transition's events to listen to transition updates.