Transitions with v-if statements at root-level of components aren't working the same way as in Vue 2 #7649
Description
Vue version
3.2.45
Link to minimal reproduction
https://stackblitz.com/edit/vue-3-transition-with-root-level-v-if
Steps to reproduce
Compare with the same reproduction for Vue 2:
The reproduction displays a button that each time it is clicked, it cycles a counter between 1..2..3.
For each number, a component is rendered. One, Two and Three.
Component Two has a v-if="false" statement at root-level, essentially not rendering the component at all.
What is expected?
In Vue 2, once the counter reaches 3, component Three is rendered with a transition as expected, just like when the v-if is applied outside of component Two when it is rendered, e.g. with a chainged v-if, v-else-if statement nested in the Transition.
Screen-cast of the expected behavior:
vue-2-transition-with-root-level-v-if.mp4
What is actually happening?
In Vue 3, once the counter reaches 3, component Three is not rendered at all, the transition appears to be remaining in a confused state. Only once the counter goes back to 1, the transition starts working again.
Screen-cast of the actual behavior:
vue-3-transition-with-root-level-v-if.mp4
System Info
System:
OS: macOS 13.1
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Memory: 2.57 GB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 19.6.0 - ~/.nvm/versions/node/v19.6.0/bin/node
Yarn: 3.3.1 - ~/.nvm/versions/node/v19.6.0/bin/yarn
npm: 9.4.0 - ~/.nvm/versions/node/v19.6.0/bin/npm
Browsers:
Chrome: 109.0.5414.119
Chrome Canary: 112.0.5578.0
Firefox: 109.0.1
Firefox Nightly: 111.0a1
Safari: 16.2
Safari Technology Preview: 16.4Any additional comments?
While this particular example may seem a bit nonsensical, this situation can be encountered in a real scenario, e.g. if the component rendered uses v-if at root-level to only render its contents once some data is fetched asynchronously. In Vue 2, such a component would still apply a transition once it is ready to be rendered. This is broken in Vue 3 not only for the component itself, but even for the next component that would render itself after the one that uses v-if in such a way.