v-memo для мемоизации шаблонов
Директива v-memo, массив зависимостей, условия пропуска повторного рендеринга и сравнение с computed
«v-memo для мемоизации шаблонов» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Что такое v-memo
v-memo мемоизирует часть шаблона. Vue кэширует результат отрисовки и повторно отрисовывает это поддерево только при изменении одной из перечисленных зависимостей. Это точечный способ оптимизировать производительность дорогостоящей, в основном статической разметки.
Массив зависимостей
Вы связываете массив зависимостей. Пока каждое значение в массиве равно своему предыдущему значению, Vue пропускает обновление всего элемента и его дочерних элементов.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>Пустой массив
Пустой массив v-memo="[]" означает, что содержимое отрисовывается один раз и больше не обновляется — это эквивалентно однократной отрисовке статического содержимого.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>Основной вариант использования: v-for
Главная причина использовать v-memo — огромные списки. Размещайте его внутри v-for, чтобы каждая строка повторно отрисовывалась только при изменении собственных значимых данных.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>Мемоизация выбранной строки
В классическом примере тысячи строк повторно отрисовываются только при изменении их состояния выбора. Сравнение item.id === selectedId означает, что строка обновляется только при получении или потере выбора.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>Перечисляйте все реактивные зависимости
Необходимо включить каждое реактивное значение, от которого зависит поддерево. Если забыть хотя бы одно, элемент не обновится при изменении этого значения — возникнет незаметная ошибка с устаревшим интерфейсом.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>Не сочетайте с v-if
Не размещайте v-memo на том же элементе, что и v-if, и не используйте его конфликтующим образом со структурными директивами v-for. В частности, v-memo и v-if на одном элементе не поддерживаются и приводят к неопределенному поведению.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo и computed
computed кэширует значение, полученное из реактивного состояния. v-memo кэширует отрисованные виртуальные узлы. Они решают разные задачи: computed предотвращает повторное вычисление данных, а v-memo — повторную отрисовку разметки.
Когда достаточно computed
Если узкое место — повторное вычисление данных (фильтрация, сортировка, форматирование), сначала используйте computed: это проще и его труднее применить неправильно.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);Когда помогает v-memo
Используйте v-memo только после того, как профилирование покажет: повторная отрисовка большого списка занимает основное время, а большинство строк между обновлениями не меняется.
Сначала измерьте
v-memo увеличивает затраты памяти и стоимость сравнений. Для небольших списков он может работать медленнее обычной отрисовки. Всегда выполняйте профилирование до и после оптимизации, чтобы подтвердить реальный выигрыш.
Быстрая проверка
Когда стоит использовать v-memo?
Итоги
v-memo="[deps]" пропускает повторную отрисовку поддерева, пока все перечисленные зависимости не изменились; это особенно полезно внутри больших списков v-for. Перечисляйте каждую реактивную зависимость, никогда не сочетайте его с v-if на одном элементе, предпочитайте computed для производных значений и всегда выполняйте профилирование, чтобы подтвердить реальный прирост производительности.
Часто задаваемые вопросы
Урок «v-memo для мемоизации шаблонов» бесплатный?
Да — полный текст урока «v-memo для мемоизации шаблонов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «v-memo для мемоизации шаблонов»?
Директива v-memo, массив зависимостей, условия пропуска повторного рендеринга и сравнение с computed Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «v-memo для мемоизации шаблонов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- v-memo для мемоизации шаблонов
- Профилирование во вкладке производительности Vue DevTools
- Виртуальная прокрутка больших списков
- Web Workers с Vue