<Transition> retains detached DOM nodes that already left #11782
Description
Vue version
Link to minimal reproduction
Steps to reproduce
- (On Chrome devtools) Trigger GC and take initial heap snapshot.
- Click "Toggle" button twice (Text disappears and appears again)
- (On Chrome devtools) Trigger GC again and take second heap snapshot.
- Compare 3. and 1.
What is expected?
There is no detached DOM node.
What is actually happening?
There are detached DOM nodes that disappeared on step 2. It is retained by the old vnode in the scope of <Transition> render function via postClone callback of resolveTransitionHooks.
System Info
No response
Any additional comments?
The detached nodes will be released when a next leave transition. So memory usage does not increase forever. But this behavior always keep some detached nodes which makes harder to find actual memory leak. In addition, since it keeps unused DOM tree in memory, it can be a problem under an environment where memory usage is restricted like mobile app's WebView.