Memory leak #4990
Description
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
rowsandcolumnscan be defined withindataas 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)