Lag during render when using cross sub-array

[lalmat]

Version

2.5.17

Reproduction link

https://jsfiddle.net/Lalmat/eywraw8t/336389/

Steps to reproduce

I've isolated the bug here : https://jsfiddle.net/Lalmat/eywraw8t/336389/

To reproduce :

1. Try to hide/show the hello world message, the redraw is instant
2. Use the load data button
3. Try to hide/show the hello world message, there's a lag that is fully dependant of you CPU velocity.

It seems that there's a setTimeout inside vue that cause this lag

What is expected?

Instant redraw

What is actually happening?

Lag during redraw depending of computer CPU

---

I use cross arrays to avoid using a toggle function. I'm completely aware that this code is kind of tricky but I can't understand why there's a lag...

This is why I follow this to experts :)

[fnlctrl]

It's not a setTimeout. Performance timeline shows massive dependArray calls, which is caused by array access in v-model

<input type="checkbox" v-model="bat.lines[line.id].checked">

I'm not familiar with the code but perhaps this PR would fix this.

A quick workaround (or maybe the correct way in your case) is to use an object for bat.lines since you're using it as a hash map(direct access by key) rather than an array. See https://jsfiddle.net/eywraw8t/336702/

[lalmat]

Working, thank you !

[jamesalanfinnigan]

Another solution that worked for me with one-way binding and a click event handler.

<input type="checkbox" :value="bat.lines[line.id].checked" @click="bat.lines[line.id].checked = !bat.lines[line.id].checked">