Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The onUnmounted callback is not triggered when using Teleport #6347

Closed
zhaokun1219 opened this issue Jul 25, 2022 · 8 comments · Fixed by #6529
Closed

The onUnmounted callback is not triggered when using Teleport #6347

zhaokun1219 opened this issue Jul 25, 2022 · 8 comments · Fixed by #6529
Assignees
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working scope: teleport

Comments

@zhaokun1219
Copy link

zhaokun1219 commented Jul 25, 2022

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.
image

@AlexandreBonaventure
Copy link
Contributor

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.

@edison1105 edison1105 added 🐞 bug Something isn't working scope: teleport 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Jun 30, 2023
@caoguanjie
Copy link

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
Copy link

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

@ghost
Copy link

ghost commented Aug 11, 2023

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

@LeonChen1024
Copy link

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

@haoqunjiang haoqunjiang added ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. and removed 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Sep 15, 2023
@haoqunjiang haoqunjiang self-assigned this Sep 19, 2023
@SunnyCrypto
Copy link

SunnyCrypto commented Sep 21, 2023

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
Copy link

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

@LeonChen1024
Copy link

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

yes

@github-actions github-actions bot locked and limited conversation to collaborators Nov 4, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working scope: teleport
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants