Vue: Memory leak

[ndamjan]

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

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

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

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

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 rowsand 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]

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

[LinusBorg]

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

https://github.com/vuejs/vue-router/issues/1111#issuecomment-279076035

[yyx990803]

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

[mikeerickson]

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

[wingedSF]

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

[Deemooo]

Has the problem been fixed?

[LinusBorg]

2 years ago, yes.

[fengdixiyun]

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

[bigghhz]

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

[LinusBorg]

Then open a new issue with a reproduction.

[sirlancelot]

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...