Кэширование

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

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

Компонент keep-alive является базовым инструментом кэширования Vue и используется для хранения состояния компонентов, которые часто монтируются и размонтируются. В Element Plus это особенно актуально для таких компонентов, как таблицы (ElTable), формы (ElForm) и панели (ElCollapse), где повторная инициализация может быть ресурсоёмкой.

<template>
  <keep-alive>
    <el-table v-if="showTable" :data="tableData">
      <el-table-column prop="name" label="Имя"></el-table-column>
      <el-table-column prop="age" label="Возраст"></el-table-column>
    </el-table>
  </keep-alive>
  <el-button @click="toggleTable">Переключить таблицу</el-button>
</template>

<script setup>
import { ref } from 'vue'

const showTable = ref(true)
const tableData = ref([{ name: 'Иван', age: 30 }, { name: 'Мария', age: 25 }])

const toggleTable = () => {
  showTable.value = !showTable.value
}
</script>

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

  • keep-alive сохраняет внутреннее состояние компонента, включая реактивные данные и scroll position.
  • Использование v-if позволяет динамически монтировать и демонтировать компонент без потери состояния.

Кэширование через v-for и key

При работе с динамическими списками в Element Plus, такими как ElTabs или ElCarousel, важно корректно управлять кэшированием элементов с помощью атрибута key. Это предотвращает ненужный ререндер и позволяет повторно использовать уже созданные компоненты.

<el-tabs v-model="activeName">
  <el-tab-pane
    v-for="tab in tabs"
    :key="tab.id"
    :label="tab.label"
    :name="tab.id">
    <component :is="tab.component"></component>
  </el-tab-pane>
</el-tabs>

Особенности:

  • :key обязателен для идентификации компонентов в цикле.
  • При смене активной вкладки компоненты с одинаковым ключом не пересоздаются, что ускоряет интерфейс.

Использование ElInfiniteScroll с кэшированием данных

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

<template>
  <el-scrollbar style="height: 400px;" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
    <el-list>
      <el-list-item v-for="item in items" :key="item.id">{{ item.name }}</el-list-item>
    </el-list>
  </el-scrollbar>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([])
const page = ref(1)
const loading = ref(false)

const loadMore = async () => {
  if (loading.value) return
  loading.value = true
  const newItems = await fetchData(page.value)
  items.value.push(...newItems)
  page.value++
  loading.value = false
}

const fetchData = async (page) => {
  // Симуляция API-запроса
  return Array.from({ length: 10 }, (_, i) => ({ id: (page - 1) * 10 + i, name: `Элемент ${ (page - 1) * 10 + i }` }))
}
</script>

Преимущества кэширования:

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

Кэширование диалоговых окон (ElDialog)

Диалоговые окна в Element Plus часто создаются и уничтожаются динамически. Чтобы сохранить состояние формы или выбранных данных между открытиями, применяется v-model совместно с keep-alive.

<el-dialog :visible.sync="dialogVisible">
  <keep-alive>
    <el-form v-if="showForm" :model="formData">
      <el-form-item label="Имя">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="Возраст">
        <el-input v-model="formData.age" type="number"></el-input>
      </el-form-item>
    </el-form>
  </keep-alive>
</el-dialog>

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

  • keep-alive предотвращает сброс данных формы при закрытии диалога.
  • v-if используется для условного рендера и управления памятью.

Кэширование данных в состоянии приложения

Element Plus не предоставляет встроенного хранилища данных, но библиотека интегрируется с Vuex или Pinia. Для кэширования больших наборов данных рекомендуется использовать:

  • Pinia с store и getter для сохранения API-данных.
  • Временные кеши внутри компонента через ref или reactive.
  • watchEffect и computed для оптимизации ререндеров на основе кэшированных значений.
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
    lastFetched: null
  }),
  actions: {
    async fetchUsers() {
      if (this.lastFetched && Date.now() - this.lastFetched < 60000) return
      const response = await fetch('/api/users')
      this.users = await response.json()
      this.lastFetched = Date.now()
    }
  }
})

Особенности подхода:

  • Данные кэшируются на уровне состояния приложения.
  • Интервалы обновления позволяют избежать избыточных запросов.
  • Совместимо с любыми компонентами Element Plus, такими как ElTable или ElSelect.

Рекомендации по эффективному кэшированию

  1. Использовать keep-alive для тяжёлых компонентов, которые часто переключаются.
  2. Добавлять уникальные key при рендере списков для повторного использования компонентов.
  3. Кэшировать API-данные на уровне Pinia/Vuex или локального состояния для снижения нагрузки на сеть.
  4. Контролировать срок жизни кэша — не держать устаревшие данные дольше, чем необходимо.
  5. Избегать чрезмерного кэширования больших компонентов без необходимости — это может привести к росту потребления памяти.

Эффективное кэширование в Element Plus сочетает Vue-инструменты (keep-alive, key, реактивное состояние) и архитектурные решения (Pinia/Vuex) для обеспечения быстрого, отзывчивого и экономного интерфейса.

Оглавление