Vue3 v-once-Direktive
Vue3 Eingebaute Direktivenv-onceDie Direktive wird verwendet, um Elemente und Komponenten nur einmal zu rendern; nachfolgende Aktualisierungen werden übersprungen.
Grundlegende Beschreibung
v-onceDie Direktive wird verwendet, um Elemente und Komponenten zu markieren, die nur einmal gerendert werden sollen. Bei nachfolgenden Re-Renders werden das Element und alle seine Kindelemente als statischer Inhalt behandelt und übersprungen. Dies kann zur Optimierung der Aktualisierungsleistung verwendet werden.
- Erwarteter Typ: Keiner (akzeptiert keine Ausdrücke)
- Zweck: Rendert Elemente und Komponenten nur einmal; nachfolgende Aktualisierungen werden als statischer Inhalt behandelt und übersprungen.
Anwendungsfälle
1. Optimierung statischer Inhalte
Wenn bestimmte Inhalte nicht aktualisiert werden müssen, kann die Verwendung von v-once unnötiges erneutes Rendern vermeiden:
Beispiel
<template>
<div>
<h1 v-once>{{ title }}</h1>
<p>Dynamischer Inhalt: {{ dynamicContent }}</p>
<button @click="updateContent">Aktualisieren</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>Dynamischer Inhalt: {{ dynamicContent }}</p>
<button @click="updateContent">Aktualisieren</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Static Title',
dynamicContent: 'Variable Content'
}
},
methods: {
updateContent() {
this.dynamicContent = 'Updated: ' + new Date().toLocaleTimeString()
}
}
}
</script>
Andere Erweiterungen