Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Memory leak #4990

Closed
ndamjan opened this issue Feb 22, 2017 · 11 comments
Closed

Memory leak #4990

ndamjan opened this issue Feb 22, 2017 · 11 comments

Comments

@ndamjan
Copy link

ndamjan commented Feb 22, 2017

Vue.js version

2.0.2

Reproduction Link

https://jsfiddle.net/szzrLcr5/

Steps to reproduce

With the dynamic binding setup as shown in fiddle:

      <tr v-for="r in rows" :key="r.id">
        <td>{{ r.name }}</td>
        <td v-for="c in columns" :key="c.id">
          <input type="text" v-model="testData[c.year][c.quarter][r.name]">
        </td>
      </tr>

Enter the numbers into the table for some time. The application gets slower until it crashes.

Suspicion is a memory leak, here are detailed steps:

Run the fiddle, go to Profiles -> Take Heap Snapshot
image

Go to Timeline and start the capture. Enter some numbers into the cells for 30 seconds. Stop the capture.
image

We can se a constant increase in Heap size going from ~20MB to ~360MB.

To assure, go to Profiles -> Take Heap Snapshot.
image

The snapshot size is ~300MB.

What is Expected?

Normal operation after entering large set of numbers.

What is actually happening?

Memory keeps getting allocated and not being freed, which leads to application crash.

Additional comments

Some additional related points:

  • Randomizing data through a procedure also leads to increase of memory (using button Randomize data will run it for 20 times)
  • The rows and columns can be defined within data as regular properties or as computed properties, no difference in memory usage.
  • By removing the reactivity of data (replacing $set with normal setters) the memory is not increasing.
  • With normal setters in place to prevent reactivity, the data gets automatically reactive if we use <input type="number" ... > instead of <input type="text" ... >
  • Data also gets automatically reactive if casting the model to number ( <input type="text" v-model.number=testData[xxx] ...>)

Environment

Windows 10 Pro [Version 10.0.10586] or Ubuntu 16.04 LTS
Google Chrome 56.0.2924.87 (64-bit)
(also happening with Microsoft Edge)

@yyx990803
Copy link
Member

Upon initial investigation, the leak is related to v-model usage rather than data reactivity. Will need further work to identify precise cause.

@LinusBorg
Copy link
Member

For reference, this may be connected - in his repo, the author also used v-model:

vuejs/vue-router#1111 (comment)

@yyx990803
Copy link
Member

@LinusBorg yeah, I've located the source problem, related to directive componentUpdated hook execution. Working on a fix.

@mikeerickson
Copy link

How does one track down such a beast, way to cure quickly

@ifihavewings
Copy link

ifihavewings commented Sep 22, 2018

GC dose not work in IE 11. computer memory may raise to 1.5GB.

@Deemooo
Copy link

Deemooo commented Dec 15, 2018

Has the problem been fixed?

@LinusBorg
Copy link
Member

2 years ago, yes.

@fengdixiyun
Copy link

我是vue2.6.8,现在切换路由还是有这个问题,我们这好几个组的项目都有这个问题

@bigghhz
Copy link

bigghhz commented Mar 3, 2020

the problem hasn't been fixed and it's back

@LinusBorg
Copy link
Member

Then open a new issue with a reproduction.

@sirlancelot
Copy link

Perhaps the Vuejs bot can be configured to automatically lock closed issues after 6 months? I'm noticing a significant uptick in users commenting on super old issues lately and I'm mostly just a lurker...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants