Potential memory leak when used in conjunction with v-once

[CamilleDrapier]

Reporting a bug?

When using vue-i18n-next on components that are rendered under a v-once directive, I see that the memory usage does not go down after the components are not rendered anymore.

I think this was not the case on the previous version of vue2/vue-i18n-v8 because the beforeDestroy and destroyed hooks were called on components under v-once (see: https://codesandbox.io/s/lingering-water-j7g43). In vue3, this does not seem to be the case anymore (for the respective beforeUnmount and unmounted)

Expected behavior

I would like to be able to use v-once and vue-i18n-next with the memory footprint to decrease when these components are not rendered anymore

I noticed that this problem does not happen if vue-i18n is not loaded, or if the v-once is removed.

Maybe cleanup of the translation component needs to be done after rendering when in a v-once context? Or could this be a shortcoming of vue3?

Reproduction

• clone https://github.com/CamilleDrapier/vue-i18n-test.git
• run npm install
• install "serve" if you do not have it already: npm install -g serve
• run ./node_modules/.bin/vue-cli-service build; serve -s dist -p 8081
• access http://localhost:8081/ with your browser (preferably in private mode for avoiding extensions mitigation)
• either access about:memory and click on "GC" in Firefox, or just open the console on the "memory" tab in Chrome and click on the "garbage can" button.
• open the browser console on the "memory" tab, take a snapshot, it should give about 1MB of used memory
• click on the "google" button 10 times.
• either access about:memory and click on "GC" in Firefox, or just open the console on the "memory" tab in Chrome and click on the "garbage can" button.
• take another snapshot, it should give about a few more MB of used memory (which is the problem).

System Info

System:
    OS: Linux 5.11 KDE neon 5.23
    CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
    Memory: 17.62 GB / 30.99 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Chromium: 96.0.4664.110
    Firefox: 95.0.1
  npmPackages:
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.15 
    @vue/cli-service: ~4.5.0 => 4.5.15 
    @vue/compiler-sfc: ^3.0.0 => 3.2.26 
    @vue/eslint-config-standard: ^5.1.2 => 5.1.2 
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0 
    vue: ^3.2.26 => 3.2.26 
    vue-i18n: ^9.2.0-beta.23 => 9.2.0-beta.23

Screenshot

Here is a small view of the memory given in Firefox, at first load, then after clicking on the "toggle" button 10 times and running explicitly the Garbage Collector, then ten more times and GC, and 10 more times and GC:

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion
• The provided reproduction is a minimal reproducible example of the bug.

[kazupon]

Thank you for your reporting again! :)

I've just checked this issue in my env.
I think it is a bug of vue3.

I've just looked at your issue on vue-next that is labeled with the bug.
vuejs/core#5154 (comment)

[CamilleDrapier]

Thank you very much, and sorry for opening the issue here, and taking your time reviewing it. I think it took me a bit of time to realize that this was a broader issue with vue3 itself!

Since the issue I opened in the vue3 repository is label as being related to a bug on the vue side, I think it is safe to close this if you are OK with it also.