fix(Transition): handle KeepAlive child unmount in Transition out-in mode #11778

edison1105 · 2024-09-02T08:49:36Z

Problems in #11775

The out-in animation fails when switching from pc to pa.
- Cause: Both pb and pc will be unmounted. It is expected that only the afterLeave of pc will be executed, but the afterLeave of pb is also being executed, causing pa to be rendered twice and resulting in the animation not working as expected. (The afterLeave of pb should not be executed again)
- Solution: afterLeave should be destroyed after performed.
pc was removed from include, but it was not unmounted.
- Cause: current is still pc in pruneCacheEntry, so failed to unmount pc.
- Solution: set current to null when patching emptyPlaceholder.

Problem in #10827

While fixing problem 2, I recalled a previous bug, #10827. At that time, it was determined that #10632 caused it, so #10632 was reverted, and the issues related to #10632 were re-fixed. Fixing problem 2 is equivalent to bringing #10632 back, so bug #10827 needs to be re-investigated.

Minimal reproduction
- Playground with v3.4.25
Steps to reproduce
- click switchToB button
- click switchToA button
When switching from CompB to CompA, the content in CompA disappears.
- Cause: The wrong transition was inherited, causing afterLeave not to perform.
- Solution: If the component is already mounted, inherit the transition from component.subTree.

Thanks to @hooray for providing the reproduction

github-actions · 2024-09-02T08:50:51Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB (+67 B)	37.7 kB (+16 B)	33.9 kB (+7 B)
vue.global.prod.js	159 kB (+67 B)	57.6 kB (+19 B)	51.2 kB (+21 B)

Usages

Name	Size	Gzip	Brotli
createApp	55.2 kB (+45 B)	21.2 kB (+17 B)	19.4 kB (+9 B)
createSSRApp	59.1 kB (+45 B)	22.9 kB (+18 B)	20.8 kB (+13 B)
defineCustomElement	59.9 kB (+45 B)	22.7 kB (+20 B)	20.8 kB (+84 B)
overall	68.9 kB (+67 B)	26.3 kB (+12 B)	23.9 kB (-1 B)

pkg-pr-new · 2024-09-02T08:51:06Z

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@11778

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@11778

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@11778

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@11778

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@11778

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@11778

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@11778

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@11778

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@11778

vue

pnpm add https://pkg.pr.new/vue@11778

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@11778

commit: 32bc95c

edison1105 · 2024-09-02T12:55:28Z

/ecosystem-ci run

vue-bot · 2024-09-02T13:01:34Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	❌ failure	❌ failure
nuxt	✅ success	✅ success
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	✅ success	✅ success
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

edison1105 · 2024-09-04T07:45:24Z

packages/runtime-core/src/componentRenderUtils.ts

@@ -253,7 +254,9 @@ export function renderComponentRoot(
          `that cannot be animated.`,
      )
    }
-    root.transition = vnode.transition
+    root.transition = isMounted


this line fixes #10827

edison1105 · 2024-09-04T07:45:40Z

packages/runtime-core/src/components/BaseTransition.ts

@@ -224,6 +224,7 @@ const BaseTransitionImpl: ComponentOptions = {
            if (!(instance.job.flags! & SchedulerJobFlags.DISPOSED)) {
              instance.update()
            }
+            delete leavingHooks.afterLeave


this line fixes problem 1

edison1105 · 2024-09-04T07:47:05Z

packages/runtime-core/src/components/KeepAlive.ts

@@ -267,7 +267,7 @@ const KeepAliveImpl: ComponentOptions = {
      pendingCacheKey = null

      if (!slots.default) {
-        return null
+        return (current = null)


this line fixes problem 2, but it will lead to #10827 regression.

edison1105 · 2024-09-04T08:05:47Z

/ecosystem-ci run

vue-bot · 2024-09-04T08:13:01Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	❌ failure	❌ failure
nuxt	❌ failure	❌ failure
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	❌ failure	✅ success
vue-macros	✅ success	✅ success
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

…ition out-in mode (#11778)" This reverts commit 3116553. close #11829 reopen #11775

yyx990803 · 2024-09-06T00:53:06Z

This introduced a regression in #11829 and has been reverted in 7e3b3bb

fix(Transition): avoid leave hooks call multiple times

811c84f

chore: minor tweaks

b2a5b16

edison1105 changed the title ~~fix(Transition): avoid leave hooks call multiple times~~ fix(Transition): avoid afterLeave hooks call multiple times Sep 2, 2024

edison1105 changed the title ~~fix(Transition): avoid afterLeave hooks call multiple times~~ fix(Transition): avoid afterLeave hook call multiple times Sep 2, 2024

test: add test case

3189297

edison1105 added ready to merge The PR is ready to be merged. scope: transition 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Sep 2, 2024

edison1105 added 3 commits September 2, 2024 20:40

chore: update

239f912

chore: update

f135eee

Merge branch 'main' into edison/fix/11775

29735cb

edison1105 added ready for review This PR requires more reviews and removed ready to merge The PR is ready to be merged. labels Sep 2, 2024

edison1105 marked this pull request as draft September 2, 2024 13:20

wip: save

fe73487

linzhe141 mentioned this pull request Sep 3, 2024

fix(runtime-core): reset current node when the KeepAlive slots default is null #11787

Closed

yyx990803 marked this pull request as ready for review September 3, 2024 09:48

edison1105 marked this pull request as draft September 3, 2024 13:21

edison1105 added 2 commits September 3, 2024 22:31

wip: save

9c6cd9e

chore: fix #10827

1b897a4

edison1105 marked this pull request as ready for review September 4, 2024 06:57

edison1105 commented Sep 4, 2024

View reviewed changes

Merge branch 'main' into edison/fix/11775

32bc95c

edison1105 changed the title ~~fix(Transition): avoid afterLeave hook call multiple times~~ fix(Transition): handle KeepAlive child unmount in Transition out-in mode Sep 4, 2024

yyx990803 merged commit 3116553 into main Sep 5, 2024
15 checks passed

yyx990803 deleted the edison/fix/11775 branch September 5, 2024 08:47

yyx990803 added a commit that referenced this pull request Sep 6, 2024

fix: Revert "fix(Transition): handle KeepAlive child unmount in Trans…

7e3b3bb

…ition out-in mode (#11778)" This reverts commit 3116553. close #11829 reopen #11775

yyx990803 mentioned this pull request Sep 6, 2024

同时使用KeepAlive和Transition, Transition使用out-in模式, 使用include控制缓存的组件, 可能导致out-in失效 #11775

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(Transition): handle KeepAlive child unmount in Transition out-in mode #11778

fix(Transition): handle KeepAlive child unmount in Transition out-in mode #11778

edison1105 commented Sep 2, 2024 •

edited

Loading

github-actions bot commented Sep 2, 2024 •

edited

Loading

pkg-pr-new bot commented Sep 2, 2024 •

edited

Loading

edison1105 commented Sep 2, 2024

vue-bot commented Sep 2, 2024

edison1105 Sep 4, 2024

edison1105 Sep 4, 2024

edison1105 Sep 4, 2024

edison1105 commented Sep 4, 2024

vue-bot commented Sep 4, 2024

yyx990803 commented Sep 6, 2024

fix(Transition): handle KeepAlive child unmount in Transition out-in mode #11778

fix(Transition): handle KeepAlive child unmount in Transition out-in mode #11778

Conversation

edison1105 commented Sep 2, 2024 • edited Loading

Problems in #11775

Problem in #10827

github-actions bot commented Sep 2, 2024 • edited Loading

Size Report

Bundles

Usages

pkg-pr-new bot commented Sep 2, 2024 • edited Loading

edison1105 commented Sep 2, 2024

vue-bot commented Sep 2, 2024

edison1105 Sep 4, 2024

Choose a reason for hiding this comment

edison1105 Sep 4, 2024

Choose a reason for hiding this comment

edison1105 Sep 4, 2024

Choose a reason for hiding this comment

edison1105 commented Sep 4, 2024

vue-bot commented Sep 4, 2024

yyx990803 commented Sep 6, 2024

edison1105 commented Sep 2, 2024 •

edited

Loading

github-actions bot commented Sep 2, 2024 •

edited

Loading

pkg-pr-new bot commented Sep 2, 2024 •

edited

Loading