feat(teleport): support deferred Teleport by yyx990803 · Pull Request #11387 · vuejs/core (original) (raw)
This pull request introduces a new prop for the built-in Teleport component: defer.
A deferred Teleport will wait until all other DOM content in the same update cycle has been rendered before locating the target container and mounting its children, so this is now possible:
...
Even if <div#target> appears after <Teleport>, it can still be resolved. This also works even if <div#target> is rendered by other components, as long as they are mounted in the same tick with the component containing the <Teleport>.
Usage with Suspense
Another use case for defer is inside <Suspense>. Previously, <Teleport> inside <Suspense> will eagerly resolve its target and therefore can only target containers outside of the <Suspense>. With defer, the target resolution happens when the Suspense is resolved, after resolved content is inserted into the DOM:
Implications of Defer Mode
This behavior is only enabled via the defer prop because it can lead to different lifecycle call order compared to the default behavior. For example, mounted hooks of components inside a deferred Teleport tree will be called after the mounted hooks of the parent. The behavior of deferred vs. non-deferred Teleports are also completely different when placed inside <Suspense>.