The onUnmounted callback is not triggered when using Teleport

[zhaokun1219]

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNq1VE1v2kAQ/StbqxJGiu1CDq0ciJLmXKlS6c2HLPZgtvF+aHdMipD/e2dt4xgioqZSfWHn872ZfewhuDcm3tUQpMECQZqKI9xmKsNFIXZ0YPSNjmSsa0StmMN9BcsskNyWQkVWlFtM2Rfz+yYL2F1eifyJoluuigoe6KeEcDKbTLNg6JThg89iEhhq5p4F5lum+E6UHAUhzAbIpMN8xeECzPxdMPMLMIvkdANsF4kNYVHpam+ALZdLRhONkBYrqMBoiwREiWtd7GkXaSEcX1dQkOsDNwZUsdJf29hQSbW5VggKV3xN5KTfLAHNqD556Z8cAd5Dcf5/Kc7/luLxtEjGOlMLl1thkDnA2pBHyJbegVnYsIZtrJZsQgKd3AyxEY8uHCe9K0K+9mqe+M7kc8jG47Cl7xpueOVgekwYltXGJqSdPjAWFUVDpKwpW96ygx+nL4t3vKp92Ecz1fj5uona6YKroCMdSW7iX04r+qO19VkfcFmQdh29j7h7mxSNaFyaJLUyT2Wca5ncUSyxtUIhISq0vLuO5/H1Z9qqw7E/BiejtdXPDiwhZsHVqHlCzh3YyNJOwIJ9E+ws9wTwLPYK1GPSMhpawNndnL00J89Le8xrS23pMTkcWp2xpjkX+m0FqsRtm1Jw5HFnn2T+g96umFbfNK0SCn/8qWRnnOiwvbxeIsZq4+jyC9gIBd+9FfbqkDBcq5dGyn6gFao87mVQmaffa0/BM7u3lu/D+Sf/TeONqKpwNqXkTA3UwvBFhb6HriCudBk+Dhkp+3hoqcWeR/NI9R5wNNEbPYacC10GfQfNH/pCE0w=

Steps to reproduce

Click the button to switch navigation, and the onUnmounted callback of the sub component will not be triggered

What is expected?

The onUnmounted callback can be triggered normally

What is actually happening?

The onUnmounted callback cannot be triggered

System Info

No response

Any additional comments?

In my project (created via npm init vue@latest), the same code also causes memory leak in development mode. The memory usage keeps going up when I switch the navigation, but this problem cannot be reproduced in SFC Playground.

[AlexandreBonaventure]

Any way I can help in order to speed up the resolution of this ticket ? It's very crippling for our application and the linked MR is now stale for almost a year.

[caoguanjie]

I also conducted testing and reproduction on my end.
Teleported component brings a serious chain reaction.
Most of the bullet box components in the element plus team use Teleported components
For example, all pop-up components such as Date Picker/Select/Popover/Dialogs/Trailer/Popconfirm/Cascader have memory leakage issues. For example, if the el dialog is configured to not use Teleported components, memory leakage will disappear.
I hope the Vue team can fix it as soon as possible, as it has had a significant impact on the project. The page often experiences memory overflow, leading to page crashes

我这边也测试发现了
Teleported组件带来也严重的连锁反应
element-plus 团队里面大部分的弹框组件都使用了Teleported组件，例如Date Picker /Select/Popover/Dialog/Drawer /Popconfirm/Cascader 等等所有弹窗式的组件都存在内存泄露问题，类似el-dialog有配置可以不使用Teleported组件，内存泄露现象就消失了。
希望vue团队尽快修复，对项目影响太大了，页面经常出现 内存溢出导致页面崩溃

[pkrzyszko]

Please, fix it as soon as possible.
It causes a huge memory leak in my application.

[ghost]

My leader said that if we don't solve it, we will solve me

[LeonChen1024]

It has been a year since this issue was reported. if it is planned to be fixed, or it will not be addressed?

[SunnyCrypto]

We got the same leak issue when using the Teleport component with the disabled prop.

The DOM nodes under the Teleport can't be garbage collected after the close or destruction.
It remains in the Detached Elements forever.

@AlexandreBonaventure @pkrzyszko @1zxca @zhaokun1219

<Teleport to="body" :disabled="!teleported">
...
</Teleport>

While changing it to conditional rendering in the template can be a quick turnaround.

<Teleport to="body" v-if="teleported">
...
</Teleport>
<template v-else>
</template>

@sodatea Since the Teleport is used in many common UI scenarios, hope this issue can be fixed ASAP.

[FrankFang]

https://twitter.com/edison11051/status/1706625485655208263
Is this thread discussing this issue?

[LeonChen1024]

https://twitter.com/edison11051/status/1706625485655208263 Is this thread discussing this issue?

yes