Vue Tip: Avoid Unwanted Re-Renders of an Element Using v-once

The v-once directive is a Vue.js directive used to avoid unwanted re-renders of an element.

It optimizes the update performance by rendering the element and component only once.

Vue will treat the element/component and its children as static content on subsequent re-render.

                      

                      
<p v-once>This text will never change: {{ message }}</p>
                    

If we put the v-once directive on an element with children, these would also be treated as static content:

                      
1
                      
<section v-once>
                    

                      
2
                      
  <h1>My Headline</h1>
                    

                      
3
                      
  <p>{{ message }}</p>
                    

                      
4
                      
</section>