Subscribe on changes!

Execution of click event in v-for area in combination with change of outer ref triggers re-rendering of whole list

avatar
Feb 12th 2024

Vue version

3.4.18

Link to minimal reproduction

https://play.vuejs.org/#eNqlVE1v2zAM/SuMLkmQrxa9pUn30XXYdtiKbkAP0w6ezdhqZcmQ6KSG4f8+Sk7SDCt62cW2yCfy8elZrXhXVfNtjWIpVj51qiLwSHV1JY0qK+sIWnC4gQ42zpYwZOhQGmlSazxB7dF5WAfE6Oev8aU0iwVslNZ9RpqNdSONBIpBZ5f8WsH52Vn4mkzGrTTQA+fbRNc4r2pfjFqVLUFNwSQlLkGKAJACJqC60KCD0J7b3GpMPIKxxDAqlI88i8SHUKFMDmQhs7BTVHAeYTtjNpA4TA70S5/vyQ8/odYW7q3T2WA43re41ip9BGsgAc8FNUa2kJgMdoXlpVZcZRfm/Y1cZ+bQZOgwGxw7NLHGzRYNcavRGNZXEOfm8qktyxC3NYHBJ+JyBqexfOB7rBdmCdRxi64B3sFPT7ZifSHM0KsHkzWrBfdFw1Oj7yUhp/I8UGaKirDkiH0u/EaKoOh+WgVpYpiU2ShXTv+lwMJp3bDCVYXGTwMdA2oDja3Blorijo1lHXcBXqCuuHOJVNisd08AMIlKJ4QHhR5qTx+t+4CEKd3hXWz3l1QBx2LPtc1HUhwpDaTgc4rkV4veumxaXhw68ApgNZjN/lvn2ayvVZxftS0L3nWrBX/HWK3jm7+06i227j0Lyuz/AgHLR2z24bnKOPA2Dbbg0KlBRmPOeGo0ciKtnbduCZVVhtBdSrHv07axTPg9Op6+D72o4mgciGrVE11EpqvFiTxiKsjHA8/nD94avgSiN7m7LSul0X2rSLH8Uix714Ycu8DuvsQYuRqnh3haYPr4QvzBP4WYFLcOmfkWpTjmKHE5Up+++f6VD+ckWdqs1ox+JXmHbI06cOxh72uTMe0TXGT7OV5lfL4//M0TsXsPQwWiAdlFvBR8vV2/Mvoz3Yv5RdzHDhTdHz0Wyg8=

Steps to reproduce

Please take a look at the playground. Open the devtools to see the log. Click on a user.

What is expected?

No re-rendering at all, when clicking on an item, when there are no changes within the v-for area.

What is actually happening?

The execution of the click event in the v-for area in combination with change of outer ref actually triggers re-rendering of whole list.

System Info

Tested on current Firefox, Chrome, Edge

Any additional comments?

For larger lists and/or bigger templates this leads to slow performance. I have a list of 300 users and a click on a user opens a simple edit modal. This takes almost 2 seconds, because the whole list is re-rendered at click!

avatar
Feb 12th 2024

Is this by design?

That's how Virtual DOMs work. Re-render the whole virtual dom tree (of this component), then diff it to determine necessary patches.

If you need to optimize this. consider

  • moving the list into its own component, or
  • using v-memo to manually control when list vnodes should be skipped in re-renders

We are currently working on a new runtime implementation called "vapor mode" that drops virtual dom in favor of fine-grained updates, but that's still in heavy development.

avatar
Feb 13th 2024

@LinusBorg Thank you for the explanations! I implemented the first variant and the result is now a super performant app. That was very enlightening.