search

vuejs / core

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

Memory leak after using v-if to remove a component #12402

Closed ablipan closed 1 week ago

ablipan commented 1 week ago

Vue version

3.5.12

Link to minimal reproduction

https://play.vuejs.org/#eNp9U01v2zAM/SuELk2Axs4+TpkbbOsKrDusw9qjL65Cp2pkSdCHm8Dwfy8lNWlRpLlJj3zU4yM1sB/GFH1AtmCVx87IxuOyVgDVSvTpQMf74L1W8J1LwTcXNXto1ErijUFVs+Uv4Yi1q8qcdZpzKbXDmoHzO4mEdo1dCzWT2PoFfJ6b7Teq+Fus8H25S90Z6GeiJVIvnLiXsUyZpZZZa1W+6YCujlthPDj0wRAiOqOthwEstjBCa3UHZ9T62SGUHsl4UcZLdIbCteJaOQ8vD8NFLDFpG+lwGqNtUNwL6vbVmMkUhqjthVL0jQyR6G3AWo1HWMmayfQoKz2VaFWZu1qyc+YdyWrFunh0WtEAE7VmnIQLifbGxOquZossJcYaKfXTn4RFJed7nD8g3xzBH902YjX7Z9Gh7cn0Q8zT7NDn8NXtX9zS+RDs9CrEEZ0I/kenZYgac9rPEG2wb/KS2us0G6HWd+5q61G5fVPZSoAx5dNaBIwz+6j1V7lfiq+JR4aSi/s5n/wBdAQuG+do/QRl0e71s1bbeAWh4NN8PidsscFdhGiJrykLhgEEjON+QT9YVTY+Aw8ZLrE=

Steps to reproduce

  1. Click the “Display” button.
  2. Drag to select items with the mouse.
  3. Click the “Hide” button.
  4. Take a memory snapshot.

Additional note: This issue does not occur when text is not selected with the mouse.

https://github.com/user-attachments/assets/489a8e5a-2185-4e0a-98e0-250f2b44b320

What is expected?

No detached item divs

What is actually happening?

Each repeated operation will result in 1000 detached divs.

System Info

System:
    OS: macOS 15.1
    CPU: (8) arm64 Apple M1
    Memory: 136.23 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.8.1 - /usr/local/bin/npm
    pnpm: 9.3.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 130.0.6723.117
    Edge: 131.0.2903.48
    Safari: 18.1

Any additional comments?

I have reproduced this issue in both Vue 2 and Vue 3.

edison1105 commented 1 week ago

very similar to #12306, I believe this is a Chrome bug. image