Execution of click event in v-for area in combination with change of outer ref triggers re-rendering of whole list
Vue version
3.4.18
Link to minimal reproduction
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!
Actually the following will also trigger re-rendering of whole list:
I was not expecting that... Is this by design?
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.