Using :style in Vue can lead to component re-rendering.

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

https://vuejs.org/

MIT License

46.78k stars 8.21k forks source link

Using :style in Vue can lead to component re-rendering. #9423

Closed guoshuangyang closed 11 months ago

guoshuangyang commented 11 months ago

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-hxtfe8?file=src%2FApp.vue

Steps to reproduce

Just open the StackBlitz link, no need for any additional actions.

What is expected?

update only the styles without causing Vue to re-render the component

What is actually happening?

Modifying only :style resulted in Vue re-rendering the component.

Any additional comments?

Is this a bug, or is it something that needs optimization?

LinusBorg commented 11 months ago

updating the style attribute means updating the DOM. to update the DOM, the component needs to re-render. That's how virtualDOM based rendering libraries work.

This will be likely be different once we ship the alternate rendering mode called "vapor mode", but there no clear ETA on that.