Improve Vue 3 performance with v-once

With Vue 3 v-once directive you can treat part of the content as static after the initial load. Vue 3 v-once can have a positive impact on the overall performance of your application, making it a small technique worth knowing.


In some cases, a portion of our Vue component's template, even though not entirely static, actually does not require constant reevaluation but only once. This is precisely where the v-once directive comes in.

With v-once, you can instruct Vue to render the content only once, avoiding future updates. As you can see, the v-once directive does not accept any arguments.

Conclusion: With v-once, starting from the initial load, the content will be treated as 100% static. This can have a positive impact on the overall performance of your application.

Demo

Juan Andrés Núñez
Juan Andrés Núñez
Frontend Engineer. Vue.js Specialist. Professional Teacher. Stoic.