Directive v-once de Vue3
Vue3 Directives intégréesv-onceLa directive est utilisée pour rendre les éléments et les composants une seule fois ; les mises à jour suivantes seront ignorées.
Description de base
v-onceLa directive est utilisée pour marquer les éléments et les composants à rendre une seule fois. Lors des re-rendus suivants, l'élément et tous ses éléments enfants seront traités comme du contenu statique et ignorés. Cela peut être utilisé pour optimiser les performances de mise à jour.
- Type attendu: Aucun (n'accepte pas d'expressions)
- Objectif: Rend les éléments et les composants une seule fois ; les mises à jour ultérieures sont traitées comme du contenu statique et ignorées.
Cas d'utilisation
1. Optimisation du contenu statique
Lorsque certains contenus n'ont pas besoin d'être mis à jour, l'utilisation de v-once peut éviter un re-rendu inutile :
Exemple
<template>
<div>
<h1 v-once>{{ title }}</h1>
<p>Contenu dynamique : {{ dynamicContent }}</p>
<button @click="updateContent">Mettre à jour</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Static Title',
dynamicContent: 'Variable Content'
}
},
methods: {
updateContent() {
this.dynamicContent = 'Updated: ' + new Date().toLocaleTimeString()
}
}
}
</script>
<div>
<h1 v-once>{{ title }}</h1>
<p>Contenu dynamique : {{ dynamicContent }}</p>
<button @click="updateContent">Mettre à jour</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Static Title',
dynamicContent: 'Variable Content'
}
},
methods: {
updateContent() {
this.dynamicContent = 'Updated: ' + new Date().toLocaleTimeString()
}
}
}
</script>
Autres extensions