La directiva v-once es una directiva de Vue.js que se usa para evitar re-renderizaciones no deseadas de un elemento. Trata el elemento como un contenido estático después de representarlo una vez por primera vez. Esto mejora el rendimiento ya que no tiene que renderizarse de nuevo. Primero, crearemos un elemento div con la identificación de elección. Luego, se aplica la directiva v-once a este elemento para que se represente solo una vez .
Sintaxis:
v-once
Parámetros: Esta función no acepta ningún parámetro.
Ejemplo: este ejemplo usa Vue.js para mostrar el funcionamiento de los datos con v-once.
<!DOCTYPE html>
<html>
<head>
<title>
VueJS v-once Directive
</title>
<!-- Load Vuejs -->
<script src=
"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div style="text-align: center;
width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
VueJS | v-once directive
</b>
</div>
<div id="canvas" style=
"border: 1px solid #000000;
width: 600px; height: 200px;">
<div id="app" style="text-align: center;
padding-top: 40px;">
<h1 v-once>{{ data }}</h1>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
data: 'GeeksforGeeks'
}
})
</script>
</body>
</html>
Producción:
