Directiva v-once de Vue3
Directivas integradas de Vue3v-onceLa directiva se usa para que los elementos y componentes se rendericen solo una vez; las actualizaciones posteriores se omitirán.
Descripción básica
v-onceLa directiva se utiliza para marcar elementos y componentes para que se rendericen solo una vez. En renderizaciones posteriores, el elemento y todos sus elementos secundarios se omitirán como contenido estático. Esto se puede usar para optimizar el rendimiento de las actualizaciones.
- Tipo esperado: ninguno (no acepta expresiones)
- Efecto: solo renderiza elementos y componentes una vez; las actualizaciones posteriores se omiten como contenido estático.
Escenarios de uso
1. Optimización de contenido estático
Cuando cierto contenido no necesita actualizarse, usar v-once evita renderizaciones innecesarias:
Ejemplo
<template>
<div>
<h1 v-once>{{ title }}</h1>
<p>Contenido dinámico: {{ dynamicContent }}</p>
<button @click="updateContent">Actualizar</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'título estático',
dynamicContent: 'contenido variable'
}
},
methods: {
updateContent() {
this.dynamicContent = 'Actualizado: ' + new Date().toLocaleTimeString()
}
}
}
</script>
<div>
<h1 v-once>{{ title }}</h1>
<p>Contenido dinámico: {{ dynamicContent }}</p>
<button @click="updateContent">Actualizar</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'título estático',
dynamicContent: 'contenido variable'
}
},
methods: {
updateContent() {
this.dynamicContent = 'Actualizado: ' + new Date().toLocaleTimeString()
}
}
}
</script>
Otras extensiones