Rendering Elements only Once (v-once directive)

Published on February 27, 2017 by

If you – for whatever reason – want to only output something one time, then you can use the v-once directive. This directive ensures that an element is only rendered once, and when Vue.js re-renders the page, the element and all of its children will be considered as static content and thereby skipped. An example usage of the v-once directive is for optimizing the performance when updating data on the page.

In the example that I have prepared for you, I simply output the title of a movie using string interpolation, and I also have a button which simply updates the movie title to a different movie. If I click the button, you will see that the text changes as you would expect.

Now I will simply add the v-once directive to the h1 element.

<h1 v-once>{{ movieTitle }}</h1>

The v-once directive does not expect an expression, so this is actually all we need to do. So if I click the button now, we will see that the text is no longer updated, even though a new value is in fact assigned to the data property. This is because the h1 element will not be re-rendered after it has been rendered initially, so when Vue.js processes data changes, it will simply ignore the element. If the element had any children, these would also be ignored, even if they contained any string interpolation for example.

Featured

Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

0 comments on »Rendering Elements only Once (v-once directive)«

  1. Julien

    Thank you It’s clear now

Leave a Reply

Your e-mail address will not be published.