VueJs v-once

v-once render the element and component once only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.

Below the example of without using v-once

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
	     <div>{{ name }}</div>
		 <input type="button" value="click me to change name" v-on:click="name = 'Saarthak Singh'" class="btn-default" />
     </div>
     <script>
     new Vue ({
        	el: '#app',
		data: {
		        name: 'Evan You'
		}
             })
   </script>
 </body>
</html>

Output

{{ name }}