Calling a slot's render function causes components to not be properly unmounted in certain conditions
Llois41 opened this issue · 7 comments
Vue version
3.5.12
Link to minimal reproduction
Steps to reproduce
- Open reproduction link
- Open browser console
- Toggle the button
- See in the console, that the component's
ComponentThatIsNotProperlyDestroyed
onBeforeUnmount
hook was not called
Switching between the versions in the playground, you can see that it still works as expected in 3.4.31
and does not work anymore after 3.4.32
.
What is expected?
ComponentThatIsNotProperlyDestroyed
gets unmounted correctly (including the lifecycle hooks being called).
What is actually happening?
In our application, we are using vuex
and vue-router
.
After updating vue
from 3.4.31
to 3.4.32
, we observe that some component's computed properties or event listeners are still getting called despite they are not even in the DOM anymore. After updating to 3.5.12
most of the problems went away but we could still reproduce one example and made the reproduction repo above.
System Info
No response
Any additional comments?
Is it intended that the slot rendering function is called by the application code?
We are evaluating to replace this call. But we still wanted file this issue since it only occurs in combination with the v-if="false"
/v-else
pattern (see comments in Page.vue
in the reproduction link).
我在你的 @Llois41 例子上进行搞了一个用例,发现v-if导致无法回收对应的节点,导致一直操作下内存一直在上涨。
链接:https://play.vuejs.org/#eNrtV81O20AQfpXBrUSoEkc0PaUmtLRUpVIpKvRmqRhnHBs2u9buOiGK8u6d3bUdJxDkA4cekku88z+zY+v7lt7nPPdnBXpDL1CxzHINCnWRA4v45CT0tAq9UcizaS6khiVITGAFiRRTOCS3w4+17ougf45c36SRvlCXQl9JkaNki6+otBQLHJd+fr+FrSmqEf0qmmDtbg6VPuSx4EqD4HBiqutoWeARKZw4U9epmH8TQqMsDZKIqYZFGvExww2rzhGcjGAZctjw92cRK5D0B0+lFG4V8qDvZkgTo4PGac4ijXQCCMbZDGIWKUVTpaHbsQL9grtCa6r+U8yy+IGUtpMDwcniRkwmDCGnfoO+syu9dvhuN7OO4c5bUQI71lkvS2ze0INhszUSNo91yeRY9QZvUozGLOOuy1KbDkbfS3HQp0Pt1m/M5JlYdCOatqIZqs1a9VsnSGwjzfh0LSMnDfrmeS/YC/aCvWAv2Av2gv9B8DpgwAkM3nFwrAy9YeN1Ce8SBkmyiX+vBCdQbEFg6MWUOGMof+U6I9QYekMHD40uYkzMf1iZwZ7dSh6nGD88I79Xj0YWelcSFcoZhl6t05GcoHbq8+tLfKTnWjkV44KR9QvK36gEK0yNzuysMHiQkFttZ6u9sKA645Mbdf5IiEtVTZlCjeXK2ocegWwz812tr8sd+B+sH8FgmmIF0A2r2ETBCmMTpkbCxnINhQ96PZhnOhWFBp1mykLTLty2uPdbeJepd5CXchjXRML3oderMqSDCu5aGkCpUUpBm2ZR6u4ykIxftRBDB1zY9b6avDbfPFJQKFpm+s8joj8igQjsQkFmHhUT2lqNMSGQPQYhicgooFnrBZQwWq3TASyX8NZ4Kb8C7Kc+8ZxTukVaRzDLsqD/Fd1gXY/NwqMp0rjKmGRSvWDVK7TRkB3tJmmo79q91A0WsZXiGT3A8ftBw7xv7BsvePV9IIVbrO1X+iVS6/ifuShFjMtN0lynCp5QvyHcCcEwomZXo85Rg+nRtrdks20ptuBnmAiJf/hUFFx3a8FPc9xm3yHfUHccdzWtUb0+E5POYcv6NvMcHhmKvI5eVvMa8ctQLkNbytwiCY2xhdWuL//fGUrzHaRroo+ZPzj2Vv8Ago//TA==
操作流程:
1、打开 sfc playground 网站
2、点击 Toggle Footer,点击多次
3、打开控制台选择'Memory'选项
4、选择 Detached elements,进行收集 被 js 还在引用的 elements 对象
结果:
内存无法被收集
怎样减缓这个情况
@FxLsoft
Use Chrome 128, or wait for Chrome to fix it. Vue cannot avoid this issue.
Chrome 128 版本也不行