2.0.2
Reproduction Linkhttps://jsfiddle.net/szzrLcr5/
Steps to reproduceWith 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 commentsSome additional related points:
rows
and columns
can be defined within data
as regular properties or as computed properties, no difference in memory usage.<input type="number" ... >
instead of <input type="text" ... >
<input type="text" v-model.number=testData[xxx] ...>
)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)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4