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

[dnalneh]

Actually the following will also trigger re-rendering of whole list:

https://play.vuejs.org/#eNqlVMlu2zAQ/ZUxL7bhLcvNsd0lTdH20AZpgRzKHlRpJDGhSIGk7AiC/r1D0nZcNMilFy0zjzNv3jypY+/qer5tkC3ZyqZG1A4suqbecCWqWhsHHRjMoYfc6AqGBB1yxVWqlXXQWDQW1h4x+vlrfMXVYgG5kDJmuMq1GUl0IAh0dkW3FZyfnfmnyWTccQURON8mssF53dhy1IlsCWIKKqlwCZx5AGcwAdH7Bj349tTmVmJiEZR2BHOlsIFnmVgfKoUqwGnINOyEKymPsJ0RG0gMJgf6lS325IefUEoN99rIbDAc71tcS5E+glaQgKWCEgNbSFQGu1LTqxRUZefn/Y1UZ2ZQZWgwGxw7tKHGzRaVo1ajMaw3EOam8qmuKh/XjQOFT47KKZyG8p7vsZ6fxVPHLZoW6ARdrdM16Qt+hqgeTNakFtyXLU2NNkrijCgKT5koCocVRfRz4TeceUX30wpIE0WkVC5MNf2XAgknZUsK1zUqO/V0FIgcWt2AroQLJ3JNOu48vERZU+cKXamz6B4PIBK1TBweFHporPuozQd0mLo7vAvt/pLK40jsudTFiLMjpQFntKdAfrWI1iXT0suhA70BrAaz2X/rPJvFWuX5putI8L5fLeg5xi7gbep3vObsdNujMS3DulYiJdLGWG2WUGuhHJorzjbRWxVSpYtYqZHhTk9SRLPSyWA4ofbfE4PlI7b78FxkVCce6boQ8d9MT5LE0IvSjsaevRSx5yI0XS1ONGNT5mxwQTF/sFrRnyEYlqbQVS0kmm+1E7QTzpbRyj5H1tC7LyHmTIPTQzwtMX18If5gn3yMs1uDxHyLnB1zLjEFupi++f6VNnaSrHTWSEK/krxD8kvjOUbY+0ZlRPsEF9h+Dv83WvoPe/PkyNKHoTxRj+wDnjP6512/Mvoz3cv5ZThHtmT9HyLZ0Eg=

I was not expecting that... Is this by design?

[LinusBorg]

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.

[dnalneh]

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