mouseover mouseleave multiple render of list
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
Open SFC playgroud, then open the console and put cursor over the list.
What is expected?
It shouldn't render this list again and again. It should just change the value from false to true.
What is actually happening?
List should generate only once. Right now how you can see its rerender every time you put mouse over the list.
System Info
No response
Any additional comments?
No response
I believe this is working as expected.
The isHovered property of each item is accessed during component rendering. This will add those properties as dependencies of the rendering process. When any dependency of rendering changes, it will trigger a re-render.
The re-render will create a new tree of VNodes. Those VNodes will then be paired up with VNodes from the previous rendering and any changes will be patched to the corresponding DOM nodes. No new DOM nodes will need to be created, the existing DOM nodes will just be updated. In this specific example, that will involve updating the text nodes that show true or false.
Usually this type of rendering update will be very fast, as modifying the DOM is the most expensive part of the process. However, if you find yourself in a situation where performance is critical and needs to be improved then you could either split this component up into multiple components (as each one renders separately from the others), or you could use v-memo to manually manage which reactive dependencies trigger rendering updates for specific nodes.
The following sections of the docs explain how Vue's rendering works and how to tweak it for optimal performance:
- https://vuejs.org/guide/extras/rendering-mechanism.html
- https://vuejs.org/guide/best-practices/performance.html
If you want to discuss how Vue's rendering/reactivity works in more detail then I recommend the Vue Discord server.
Yes, you are right, v-memo fix this problem. I updated the example and its better.