Vue 3.5.6 memory leaks

[ftrsoft]

Vue version

3.5.6

Link to minimal reproduction

Steps to reproduce

Update prodject to vue 3.5.6

What is expected?

Memory leaks. In 1 hour, memory consumption increased from 200 MB to 500 MB.
When I go back to version 3.5.5, everything becomes normal

What is actually happening?

System Info

No response

Any additional comments?

No response

[aurelsserban]

I experience the same behavior in my web app, unfortunately I am struggling to reproduce the memory leak using play.vuejs.org playground.

Unfortunately in my case the 3.5.5 version is not fixing the leaks either. I noticed that the 3.4.38 version is okay.

Maybe I am doing something wrong in my code, we have a big webapp using vue intensively and I really struggle to get to the root cause, all I can provide is the following:

1. The chain of retainers seems to follow the following pattern:
   
2. I suspect that somehow the VUE_SSR_SETTERS might be the root cause or something captured by a closure, but I am not sure.

I tried to debug it for about a week now but it seems I was not able to get very far.

I will provide another screenshot from another detached element chain of retainers (basically it seems to be the same 'link/path'):

[edison1105]

@ftrsoft @aurelsserban
Please follow the issue requirement and provide a minimal reproduction.

[yysanf]

currentInstance in watch scheduler Scopes
when watch executed in scope like this

const scope = effectScope();
const state = scope.run(() => ref({}));

const CompOne = defineComponent({
  setup() {
   state.value ={name: 'state'}
    scope.run(() => {
      watch(() => state.value.name, () => console.log('Do something'))
    })
    return { state };
  },
});

When components are destroyed， ComponentInstance in state.dep.subs.sub.scheduler Scopes, can not gc.

vue sfc

for example：Using pinia-plugin-persist can cause this problem

[edison1105]

@yysanf
You should scope.stop() first and then log state
I modified the reproduction. see Playground

[edison1105]

@ftrsoft @aurelsserban @yysanf
Please use those preview packages to test and confirm whether it resolves your issue.
If not, please provide a minimal reproduction.

[yyx990803]

I don't think the issues from @aurelsserban @yysanf are the same one as the original issue opened by @ftrsoft .

The subsHead caused memory leak is dev-only and fixed in 5c8b76e.

The original issue, however, is a regression according to @ftrsoft, but we cannot investigate it without a proper reproduction.

[aurelsserban]

@yyx990803 @edison1105 sorry for being late.

I can confirm that in my case vue v3.5.7 and v3.5.8 solved the memory leaks in our webapp.

Thank you.

[ftrsoft]

I'm sorry, I don't know how to make a reproduction. I have a service in docker: nuxt 3.12.4 + vue 3.5.8. Memory usage is constantly growing. On vue 3.4.38, memory usage is stable

[konstantin-karlovich-unbiased-co-uk]

To be honest there is a memory leak in my project too, which I'm trying to localise
It appears since vue 3.5.5 and nuxt 3.13.2

[edison1105]

@agracia-foticos
Please create a new issue with a minimal reproduction.

[yyx990803]

@ftrsoft looks like this is on the server-side only.

I think you can use node --inspect .output/server/index.mjs to run the built Nuxt app locally, and then use Chrome (go to chrome://inspect) to take memory snapshots and compare two snapshots over time. You can also save the memory profiles and share with us here.

[yyx990803]

@konstantin-karlovich-unbiased-co-uk can you confirm it appears only after 3.5.5 and not 3.5.4 or before?

[konstantin-karlovich-unbiased-co-uk]

@konstantin-karlovich-unbiased-co-uk can you confirm it appears only after 3.5.5 and not 3.5.4 or before?

I can send you a snapshot of the memory that has a memory leak. But only to an email

[ftrsoft]

@yyx990803 today I will test all versions of vue, determine which memory leaks starts and take a memory snapshot. Yesterday I checked 3.5.1 it is Ok

[ftrsoft]

I test different version, there are result:

Snapshot of Node heap with vue 3.5.6:

Heap-20240925T143110.zip
Heap-20240925T143117.zip
Heap-20240925T143123.zip

[edison1105]

@ftrsoft
Could you please test it with v3.5.8 and take snapshots?
Because we've already fixed several memory leaks before v3.5.8.

[ftrsoft]

Test Vue 3.5.8. Memory leaks.
I found a place in my project that increases memory when change from one page (page1) to another (page2).
Algorigthm for snapshots:

1. Go to different pages on project for wam-up
2. Take snapshot 1
3. Make 5 times (page1 -> page2)
4. Take snapshot 2
5. Make 1 time (page1 -> page2)
6. Take snapshot 3

Heap-20240925T151234.zip
Heap-20240925T151240.zip
Heap-20240925T151243.zip

On version 3.5.5 change page1 to page2 add only 0.5 - 1 Mb of memory, and then release it. On v.3.5.8 add ~6Mb and not release

[edison1105]

@ftrsoft Thanks ❤️

[yyx990803]

There are not many reactivity related changes between 3.5.5 and 3.5.6

The most likely commit is #11944 / c74bb8c

Since we have published packages for every commit, can you try the version for the commit right before that one by using the following version in your package.json?

"vue": "https://pkg.pr.new/vue@cbc39d5"

If cbc39d5 also has leaks, we will need to bisect all the commits between that and 3.5.5 to find out the exact commit that caused the leak.