fix(runtime-core): properly handle async component update before resolve

[linzhe141]

close #11617

this pr playground

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	98.7 kB (+4 B)	37.4 kB (+1 B)	33.7 kB (-49 B)
vue.global.prod.js	156 kB (+4 B)	57.2 kB (+1 B)	50.8 kB (-85 B)

Usages

Name	Size	Gzip	Brotli
createApp	54.2 kB (+4 B)	21 kB	19.1 kB (-41 B)
createSSRApp	58.1 kB (+4 B)	22.6 kB (+3 B)	20.6 kB (+10 B)
defineCustomElement	58.8 kB (+4 B)	22.5 kB	20.5 kB (-55 B)
overall	67.7 kB (+4 B)	26 kB (-1 B)	23.6 kB (+4 B)

[edison1105]

Suggested change

	instance.update()
	update()

[edison1105]

Thank you for addressing the issue.
Could you please add a test case?

[edison1105]

There is another problem here. The update() is executed 2 times.
This behavior is not related to this PR. But it needs to be fixed.

The flow is as follows:

1. When locateNonHydratedAsyncRoot is called, subComponent.asyncResolved is false, nonHydratedAsyncRoot has a value, and a then callback is registered.
2. The then callback is triggered and calls update.
3. We go back to step 1, but subComponent.asyncResolved is still false because the then at this line is registered later and executes after the previously registered then. The then callback is registered again.
4. Same as step 2.
5. Now subComponent.asyncResolved is true, and nonHydratedAsyncRoot is undefined.
6. The remaining update logic runs.

In this process, the then callback gets registered twice, and update is called twice.
The following code can be used to prevent this behavior.

nonHydratedAsyncRoot.asyncDep!.then(() => {
  // the instance may be destroyed during the time period
  queuePostRenderEffect(()=>{
    if (!instance.isUnmounted) update()
  },parentSuspense)
})

[edison1105]

I'm pretty sure the previous fix is proper.
Is there any reason why you changed it?

[linzhe141]

@edison1105 I tried to fix it again, maybe it should be handled like this

I'm pretty sure the previous fix is proper.我很确定之前的修复是正确的。 Is there any reason why you changed it?你有什么理由改变它吗？

You are right! I was wrong. I thought that when patching suspense, I had to confirm which component was pending, but this has nothing to do with pendingBranch.

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@11619

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@11619

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@11619

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@11619

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@11619

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@11619

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@11619

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@11619

@vue/shared

npm i https://pkg.pr.new/@vue/shared@11619

vue

npm i https://pkg.pr.new/vue@11619

@vue/compat

npm i https://pkg.pr.new/@vue/compat@11619

commit: 3455334