search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.75k stars 8.35k forks source link

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

Closed Llois41 closed 1 week ago

Llois41 commented 1 week ago

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

FxLsoft commented 1 week ago

我在你的 @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 commented 1 week ago

@FxLsoft this is a known chrome bug. see https://github.com/vuejs/core/issues/12306

FxLsoft commented 1 week ago

怎样减缓这个情况

edison1105 commented 1 week ago

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

FxLsoft commented 1 week ago

Chrome 128 版本也不行

edison1105 commented 1 week ago

@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: https://github.com/vuejs/core/issues/5256, and it has already been fixed.

FxLsoft commented 1 week ago

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