quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.99k stars 3.53k forks source link

`q-expansion-item` leaks memory if its child is not a `q-item-section` #17405

Open FelixNumworks opened 3 months ago

FelixNumworks commented 3 months ago

What happened?

When I update the model of the default slot of q-extension-item, memory is leaked if this slot is not filled with a q-item-section

This leaks memory when myString is updated

  <q-expansion-item>
    <template #default>
      <div> <!-- I'm using a div here -->
        <q-input v-model="myString"></q-input>
      </div>
    </template>
  </q-expansion-item>

This works well when myString is updated

  <q-expansion-item>
    <template #default>
      <q-item-section> <!-- I'm using a q-item-section here -->
        <q-input v-model="myString"></q-input>
      </q-item-section>
    </template>
  </q-expansion-item>

What did you expect to happen?

No memory leak

Reproduction URL

https://stackblitz.com/edit/quasarframework-ygojpg?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

  1. Go to the reproduction URL
  2. Copy the project locally, (or just the index component in any quasar project)
  3. Launch it and watch the memory go up through dev tools.

I didn't manage to see the memory go up directly on stackblitz, but it might be due to the fact that the code is executed in an iframe

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Darwin(23.4.0) - darwin/arm64
NodeJs - 20.11.1

Global packages
  NPM - 10.7.0
  yarn - Not installed
  pnpm - Not installed
  bun - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - 4.0.0
  cordova - Not installed

Important local packages
  quasar - 2.16.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.14 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.0
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 5.3.2 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.20.2 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 4.9.5 -- TypeScript is a language for application scale JavaScript development
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - 31.1.0 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - 24.13.3 -- A complete solution to package and build a ready for distribution Electron app for MacOS, Windows and Linux with “auto update” support out of the box
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing-e2e-cypress - 6.1.0 -- A Quasar App Extension for Cypress e2e
  @quasar/quasar-app-extension-testing-unit-vitest - 1.0.0 -- A Quasar App Extension for running tests with Vitest

Relevant log output

No response

Additional context

No response

rstoenescu commented 3 months ago

If this has to do with anything, it would be with how Vue manages the memory, not with Quasar UI itself, but will investigate. Can you reproduce with anything else other than a QInput though?

FelixNumworks commented 3 months ago

Yes the QInput part isn't relevant. I just used it in my example for simplicity. In reality I use a custom component with a more complex model.

FelixNumworks commented 3 months ago

If it can help you, I have hundreds of these large __vnode and transition items.

Screenshot 2024-07-31 at 16 25 46 Screenshot 2024-07-31 at 16 26 49