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

Calling a slot's render function causes components to not be properly unmounted in certain conditions #12371

Closed
Llois41 opened this issue Nov 12, 2024 · 7 comments · Fixed by #12374
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. regression

Comments

@Llois41
Copy link

Llois41 commented Nov 12, 2024

Vue version

3.5.12

Link to minimal reproduction

https://play.vuejs.org/#eNqtVG1v0zAQ/iu3gNRuahNB4cvoNhhMYkiMCca3SMwkl8Sba0e207Wq+t85Oy9tUTvlw/Il9r0+d37uVsGnsgznFQanwdQkmpcWDNqqBMFkfhYH1sTBeSz5rFTawgo0ZrCGTKsZDMht8KHTfVb0lyjtXcHstblR9larErVYfkFjtVpi2viFUQ9bB2or+i3LsXN3l1Yfy0RJY0FJOHPohhkTBo9JM43qggg+XSzOSsEs0g1gmvI5JIIZQyVSB3yNQN/0b2UthfqYCJ48ktKHPVKSLO5UnguEkpJPo9rOh/Z+Ht98zDPv08UjTZsYXhXIUsFlDaHRFpPzr414GtGlc4u2AO+JRUVb6t92qD4PEO1PUAtcDXV7IuoPnXZsghGRgdJmPA8fjJLEmJUzjoOEEnOB+kdpOb1FHJyC1zgdE0I9ffMyqysctfKkwORxj/zBLJwsDm41GtRzjINOZ5nO0dbqq183uKBzp5yptBJk/YzyJxolKoexNrusZEqwt+w82mvPOC7zO3O1oCabtigH1FmuvX0cEANdzw+VvoE7Cd95v1iuqYste93I7bLSYOLCdMx0lhtqHo3H8MRtoSoLtuDG020E9z3e/R5OuDmBspFD2k1ZGMJ43GYoJi2F/RBRatRa6YaYh2EgGb8oEDeeddgNX11en++JGagMkZn+JaPdoDJg4AkF3B2NUNZbpZjRXKWgNBR0pV7bJTSTYzbpAFYreO28TNjO6EU4PIYLekWiIziyLOm/phfs8Pgsks2Q2tXEJJN2wNoRcqfmWfcMVM892Hc5K3mJmdL4W85UJe2oE3x31//3dix31EMq+OzctYemBEOh8uGgJ77dPINjt3030Rs0LxG/CVVn6LvfeyShNvawOrQW/8xRuyVBzzQJ34dv3gbrfxQQfl4=

Steps to reproduce

  1. Open reproduction link
  2. Open browser console
  3. Toggle the button
  4. 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).

@edison1105 edison1105 added ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. regression labels Nov 13, 2024
@FxLsoft
Copy link

FxLsoft commented Nov 13, 2024

我在你的 @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 对象
结果:
内存无法被收集
Uploading image.png…

@edison1105
Copy link
Member

@FxLsoft
this is a known chrome bug. see #12306

@FxLsoft
Copy link

FxLsoft commented Nov 13, 2024

怎样减缓这个情况

@edison1105
Copy link
Member

@FxLsoft
Use Chrome 128, or wait for Chrome to fix it. Vue cannot avoid this issue.

@FxLsoft
Copy link

FxLsoft commented Nov 13, 2024

Chrome 128 版本也不行

@edison1105
Copy link
Member

edison1105 commented Nov 13, 2024

@FxLsoft
I got confused just now. I did not reproduce it using the demo you provided. Please note to use v3.5.12.
image

You probably encountered this issue: #5256, and it has already been fixed.

@FxLsoft
Copy link

FxLsoft commented Nov 14, 2024

我在项目中进行memory进行分析,很多节点没有被回收,是跟v-if v-for指令和vue里currentBlock方法有关。具体不清楚哪里的问题,部分截图如下
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. regression
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants