Caching стратегии

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

Кэширование компонентов с keep-alive

Компонент keep-alive позволяет сохранять состояние дочерних компонентов при их удалении из DOM, предотвращая повторное создание и рендеринг. Это особенно полезно для вкладок, динамических маршрутов или модальных окон.

<template>
  <keep-alive include="UserProfile, Dashboard">
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'Dashboard'
    };
  }
};
</script>

Ключевые моменты:

  • Атрибут include задаёт список компонентов, которые будут кэшироваться.
  • Атрибут exclude позволяет исключить компоненты из кэширования.
  • Используется вместе с динамическими компонентами через :is.
  • Поддерживает хуки жизненного цикла: activated и deactivated, которые вызываются при активации и деактивации кэшированного компонента.

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

В Vue.js вычисляемые свойства (computed properties) автоматически кэшируются на основе реактивных зависимостей. Это снижает нагрузку на рендеринг и позволяет повторно использовать вычисленные значения без лишних пересчётов.

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5]
    };
  },
  computed: {
    doubledItems() {
      return this.items.map(item => item * 2);
    }
  }
};
</script>

Особенности кэширования computed properties:

  • Пересчёт происходит только при изменении реактивных зависимостей.
  • Не кэшируется при вызове методов — методы всегда выполняются заново.
  • Позволяет сочетать с Vuex или Pinia для хранения состояния между компонентами.

Кэширование маршрутов с vue-router

Для сложных SPA-приложений кэширование маршрутов улучшает пользовательский опыт, уменьшая время загрузки при переходах между страницами. В vue-router компоненты можно кэшировать через keep-alive на уровне <router-view>.

<template>
  <keep-alive>
    <router-view v-slot="{ Component }">
      <component :is="Component"></component>
    </router-view>
  </keep-alive>
</template>

Советы по кэшированию маршрутов:

  • Использовать динамический include, если кэшировать только определённые маршруты.
  • Отслеживать состояние через activated и deactivated для загрузки данных только при необходимости.
  • Комбинировать с хранением данных в Vuex/Pinia для оптимизации сетевых запросов.

Кэширование API-запросов

Кэширование данных из API может быть реализовано на клиентской стороне с использованием реактивных свойств или специализированных библиотек (axios-cache-adapter, swrv). Основная идея — хранить результат запроса и использовать его повторно, избегая лишних сетевых вызовов.

<script>
import axios from 'axios';
import { ref } from 'vue';

export default {
  setup() {
    const users = ref([]);
    const cache = {};

    const fetchUsers = async () => {
      if (cache['users']) {
        users.value = cache['users'];
        return;
      }
      const response = await axios.get('/api/users');
      users.value = response.data;
      cache['users'] = response.data;
    };

    return { users, fetchUsers };
  }
};
</script>

Ключевые моменты:

  • Простое кэширование можно реализовать через объект или Map.
  • Для долговременного хранения используют localStorage, sessionStorage или IndexedDB.
  • Важно контролировать актуальность данных: можно использовать TTL (time-to-live) или условные проверки на свежесть.

Мемоизация функций

Vue.js поддерживает использование мемоизации для функций, которые выполняют тяжёлые вычисления. В setup API мемоизация может быть реализована через computed или сторонние библиотеки (lodash.memoize).

import { computed, ref } from 'vue';
import memoize from 'lodash.memoize';

export default {
  setup() {
    const numbers = ref([1, 2, 3, 4, 5]);
    const heavyCalculation = memoize((nums) => nums.reduce((a, b) => a + b * 2, 0));

    const result = computed(() => heavyCalculation(numbers.value));

    return { result };
  }
};

Преимущества мемоизации:

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

Выбор стратегии кэширования

Правильная стратегия кэширования зависит от типа данных и сценария использования:

Тип данных Стратегия кэширования Инструменты
Компоненты UI keep-alive Vue.js
Вычисленные значения computed Vue.js
Маршруты SPA keep-alive + router-view Vue Router
API-запросы Кэш в памяти / localStorage / IndexedDB Axios, swrv
Тяжёлые вычисления Мемоизация lodash.memoize, computed

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

Оглавление