Vue Academy · Урок

Методы мемоизации

Избегайте избыточных вычислений с помощью мемоизации

«Методы мемоизации» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Выполнять меньше работы

Производительность часто достигается за счёт того, что не выполняются повторные вычисления и повторная отрисовка неизменившихся элементов. Vue предоставляет несколько инструментов мемоизации, которые кэшируют результаты и пропускают ненужные обновления.

Кэширование вычисляемых свойств

Вычисляемое свойство кэширует свой результат и пересчитывается только при изменении одной из его реактивных зависимостей. Поэтому оно гораздо эффективнее метода, который выполняется при каждой отрисовке.

computed: {
  expensiveTotal() {
    return this.items.reduce((sum, i) => sum + i.price, 0)
  }
}

Вычисляемое свойство и метод

Метод выполняется при каждом повторном отображении шаблона, даже если его входные данные не изменились. Вычисляемое свойство повторно использует кэшированное значение, поэтому для производных данных в шаблонах отдавайте предпочтение вычисляемым свойствам.

// method: runs on EVERY render
methods: { total() { /* ... */ } }

// computed: cached until items change
computed: { total() { /* ... */ } }

v-once для статического содержимого

Директива v-once отрисовывает элемент один раз, а затем пропускает его при всех последующих обновлениях. Используйте её для содержимого, которое никогда не меняется.

<template>
  <h1 v-once>{{ appTitle }}</h1>
</template>

Когда использовать v-once

Применяйте v-once к большим статическим разделам, например к подвалу, тексту условий или фиксированному заголовку. Vue рассматривает результат отрисовки как статический и больше никогда не сравнивает его заново.

<footer v-once>
  <p>Copyright 2024. All rights reserved.</p>
</footer>

v-memo для ресурсоёмких списков

Директива v-memo выполняет мемоизацию поддерева и повторно отрисовывает его только при изменении значений в массиве зависимостей. Особенно полезна она для больших списков.

<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
  {{ item.name }} - {{ item.selected }}
</div>

Как работает v-memo

Каждый элемент отрисовывается заново только при изменении его массива мемоизации. Если item.selected не меняется, Vue полностью пропускает повторную отрисовку этой строки, даже если родительский компонент обновляется.

Как избежать лишней повторной отрисовки

Компоненты повторно отрисовываются при изменении их реактивных данных или свойств. Делайте компоненты небольшими и специализированными, чтобы изменение в одной области не заставляло повторно отрисовывать несвязанные части.

Стабильные ключи в списках

Всегда задавайте для v-for стабильный уникальный :key. Использование индекса массива в качестве ключа может привести к тому, что Vue повторно использует неправильные узлы DOM и выполняет больше повторных отрисовок, чем необходимо.

<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>

Минимум реактивных данных

Добавляйте данные в реактивное состояние, только если от них зависит шаблон. Большие объекты или значения, которые никогда не меняются в интерфейсе, создают лишние затраты при отслеживании реактивности. Когда это уместно, используйте обычные переменные, не являющиеся реактивными.

import { shallowRef } from "vue"

// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())

Мемоизация чистых функций

Для чистых вычислений на JavaScript вне реактивности Vue можно кэшировать результаты в простой таблице соответствий, чтобы повторные вызовы с одинаковыми входными данными возвращали результат мгновенно.

const cache = new Map()
function fib(n) {
  if (n < 2) return n
  if (cache.has(n)) return cache.get(n)
  const result = fib(n - 1) + fib(n - 2)
  cache.set(n, result)
  return result
}

Быстрая проверка

Проверьте свои знания о мемоизации.

Итоги

Сокращайте ненужную работу с помощью кэширования: вычисляемые свойства мемоизируют производные значения, v-once отрисовывает статическое содержимое один раз, а v-memo пропускает повторную отрисовку поддеревьев в больших списках. Используйте стабильные ключи и не перегружайте реактивное состояние. Далее вы узнаете, как находить и устранять узкие места производительности с помощью настоящих инструментов.

Часто задаваемые вопросы

Урок «Методы мемоизации» бесплатный?

Да — полный текст урока «Методы мемоизации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Методы мемоизации»?

Избегайте избыточных вычислений с помощью мемоизации Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Методы мемоизации»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy