Директива v-once в Vue3
Встроенные директивы Vue3v-onceДиректива используется для рендеринга элементов и компонентов только один раз; последующие обновления будут пропущены.
Базовое описание
v-onceДиректива используется для пометки элементов и компонентов, которые должны отображаться только один раз. При последующих повторных рендерах элемент и все его дочерние элементы будут рассматриваться как статическое содержимое и пропускаться. Это можно использовать для оптимизации производительности обновления.
- Ожидаемый тип: отсутствует (не принимает выражения)
- Назначение: рендерит элементы и компоненты только один раз; последующие обновления рассматриваются как статическое содержимое и пропускаются.
Сценарии использования
1. Оптимизация статического содержимого
Когда определённое содержимое не нуждается в обновлении, использование v-once позволяет избежать ненужного повторного рендеринга:
Пример
<template>
<div>
<h1 v-once>{{ title }}</h1>
<p>Динамическое содержимое: {{ dynamicContent }}</p>
<button @click="updateContent">Обновить</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Статический заголовок',
dynamicContent: 'Переменное содержимое'
}
},
methods: {
updateContent() {
this.dynamicContent = 'Обновлено: ' + new Date().toLocaleTimeString()
}
}
}
</script>
<div>
<h1 v-once>{{ title }}</h1>
<p>Динамическое содержимое: {{ dynamicContent }}</p>
<button @click="updateContent">Обновить</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Статический заголовок',
dynamicContent: 'Переменное содержимое'
}
},
methods: {
updateContent() {
this.dynamicContent = 'Обновлено: ' + new Date().toLocaleTimeString()
}
}
}
</script>
Другие расширения