Какими функциями фреймворка Vue воспользовался для проекта?

Использование функций фреймворка Vue в проектах

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

Основные функции и концепции

Компонентная архитектура – фундамент любого Vue проекта. Я активно использовал:

• Single-File Components (SFC) .vue для объединения шаблона, логики и стилей в одном файле.
• Реквизиты (Props) для передачи данных от родительских к дочерним компонентам с детальной валидацией.
• События (Events) через $emit для коммуникации от детей к родителям.
• Слоты (Slots) и Scoped Slots для создания гибких, переиспользуемых компонентов-контейнеров.

<!-- Пример компонента с props, events и slot -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <slot :itemData="internalData"></slot>
    <button @click="handleClick">Отправить событие</button>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return { internalData: { id: 1 } };
  },
  methods: {
    handleClick() {
      this.$emit('action', this.internalData);
    }
  }
};
</script>

Система реактивности и управление состоянием

Реактивность Vue – его "магическая" основа. Я применял:

• data() и reactive() (Vue 3) для создания реактивных объектов.
• ref() для реактивных ссылок на отдельные значения.
• computed() свойства для деривированных данных с автоматическим кэшированием.
• watch() и watchEffect() для реагирования на изменения данных.

Для управления состоянием на уровне приложения я выбирал инструменты по масштабу проекта:

• Vuex в крупных Vue 2 проектах для централизованного хранилища с модулями.
• Pinia (стандарт для Vue 3) в последних проектах – более простой, типобезопасный и модульный.

// Пример использования Composition API с Pinia
import { ref, computed, watchEffect } from 'vue';
import { useCartStore } from '@/stores/cart';

export function useProduct(productId) {
  const cartStore = useCartStore();
  const product = ref(null);
  const isLoading = ref(false);

  // Computed свойство
  const isInCart = computed(() => {
    return cartStore.items.some(item => item.id === productId);
  });

  // WatchEffect для побочных действий
  watchEffect(() => {
    if (product.value && product.value.stock < 5) {
      console.warn('Товар почти закончился!');
    }
  });

  async function fetchProduct() {
    isLoading.value = true;
    product.value = await api.fetchProduct(productId);
    isLoading.value = false;
  }

  return { product, isLoading, isInCart, fetchProduct };
}

Рендеринг и жизненный цикл

Я глубоко использовал директивы и хуки жизненного цикла:

• v-if / v-else / v-else-if, v-show для условного рендеринга.
• v-for с ключами (:key) для рендеринга списков.
• v-bind (:) и v-on (@) для динамических атрибутов и событий.
• v-model с кастомными модификаторами для двустороннего связывания данных форм.
• Хуки жизненного цикла: onMounted(), onUpdated(), onUnmounted() для управления логикой в нужные моменты (загрузка данных, очистка, etc).

Продвинутые функции и оптимизация

Для сложных задач и оптимизации производительности я применял:

• Динамические компоненты с <component :is="currentComponent"> для переключения между разными компонентами.
• Асинхронные компоненты с defineAsyncComponent для код-сплитинга и lazy loading.
• Функции рендеринга и <Teleport> для рендеринга контента вне текущей иерархии DOM (модалки, тултипы).
• Провайдеры/Инжекторы (provide / inject) для обхода многоуровневого пропсинг в глубоких иерархиях компонентов.
• Композиции (Composables) – моя любимая функция Vue 3. Я создавал множество своих (useFetch, useLocalStorage, useAuth) для повторного использования логики без привязки к компонентам.
• Шаблонные ссылки (ref на template) для прямого доступа к DOM элементам или экземплярам компонентов.

Инструменты экосистемы

Помимо ядра Vue, я интегрировал ключевые инструменты его экосистемы:

• Vue Router для навигации с динамическими маршрутами, защитой маршрутов и lazy loading.
• Vue DevTools для отладки и анализа компонентов и состояния.
• Vite как сборщик для мгновенной горячей перезагрузки (HMR) и оптимальной производительности.

Выбор конкретных функций всегда зависел от требований проекта: Composition API для сложной логики и переиспользования, Options API для простых, понятных компонентов; Pinia для состояния в Vue 3; директивы для декларативного описания поведения DOM. Этот гибкий подход позволяет строить эффективные и надежные фронтенд-приложения.