По какому принципу пишешь страницу на Vue

Принципы разработки страницы на Vue.js

При создании страницы на Vue.js я придерживаюсь компонентного подхода и следующих ключевых принципов:

1. Компонентная архитектура

Каждая страница представляет собой иерархию компонентов, где:

• Корневым компонентом является страница (Page/View)
• Крупные блоки разбиваются на дочерние компоненты
• Переиспользуемые элементы выносятся в отдельные компоненты

<!-- Пример структуры компонентов -->
<template>
  <div class="product-page">
    <ProductHeader :title="product.name" />
    <ProductGallery :images="product.images" />
    <ProductDetails :product="product" />
    <RelatedProducts :category="product.category" />
    <ProductReviews :reviews="product.reviews" />
  </div>
</template>

2. Однонаправленный поток данных (Props Down, Events Up)

Данные передаются сверху вниз через props, а изменения сообщаются вверх через события:

<!-- Родительский компонент -->
<template>
  <ChildComponent 
    :user-data="user" 
    @update-user="handleUserUpdate"
  />
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'John', email: 'john@example.com' }
    }
  },
  methods: {
    handleUserUpdate(updatedUser) {
      this.user = { ...this.user, ...updatedUser };
    }
  }
}
</script>

3. Разделение ответственности

Логика четко разделяется между:

• Шаблоном (Template) - отвечает за отображение
• Логикой (Script) - обработка данных и бизнес-логика
• Стилями (Style) - внешний вид компонента

4. Реактивность и управление состоянием

Использую реактивную систему Vue для автоматического обновления UI:

<script>
export default {
  data() {
    return {
      // Реактивные данные
      counter: 0,
      items: [],
      isLoading: false
    }
  },
  computed: {
    // Вычисляемые свойства для производных данных
    totalItems() {
      return this.items.length;
    },
    filteredItems() {
      return this.items.filter(item => item.active);
    }
  },
  watch: {
    // Наблюдатели для побочных эффектов
    counter(newValue, oldValue) {
      console.log(`Counter changed from ${oldValue} to ${newValue}`);
    }
  }
}
</script>

5. Жизненный цикл компонента

Учитываю хуки жизненного цикла для правильной инициализации и очистки:

export default {
  created() {
    // Инициализация данных, подписки на события
    this.fetchData();
  },
  mounted() {
    // Работа с DOM, инициализация сторонних библиотек
    this.initChart();
  },
  beforeDestroy() {
    // Очистка таймеров, отписка от событий
    clearInterval(this.timer);
  }
}

6. Оптимизация производительности

Применяю техники для повышения производительности:

• Ленивая загрузка компонентов с помощью динамических импортов
• Мемоизация вычисляемых свойств
• Использование v-once для статического контента
• Кеширование через keep-alive при необходимости

7. Маршрутизация и навигация

Для многостраничных приложений использую Vue Router:

// Маршруты с ленивой загрузкой
const routes = [
  {
    path: '/product/:id',
    name: 'ProductPage',
    component: () => import('./views/ProductPage.vue'),
    props: true // Автоматическое преобразование params в props
  }
];

8. Работа с API и состоянием

Для сложных приложений внедряю управление состоянием через Vuex или Pinia:

// Пример с Pinia
import { defineStore } from 'pinia';

export const useProductStore = defineStore('product', {
  state: () => ({
    products: [],
    selectedProduct: null
  }),
  actions: {
    async fetchProducts() {
      const response = await api.getProducts();
      this.products = response.data;
    }
  }
});

9. Стилизация и CSS-методология

Подход к стилям зависит от проекта:

• Scoped стили для изоляции стилей компонента
• CSS-модули для гарантированной изоляции
• Композиция стилей через CSS-препроцессоры (Sass/SCSS)

10. Тестирование и поддерживаемость

Обеспечиваю качество кода через:

• Написание unit-тестов для компонентов
• Использование TypeScript для типизации
• Соблюдение соглашений по именованию
• Документацию компонентов через JSDoc

Пример полной структуры компонента страницы:

<template>
  <div class="user-profile-page">
    <PageHeader 
      :title="pageTitle" 
      :loading="isLoading"
    />
    
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
    
    <UserProfileCard 
      v-else
      :user="userData"
      @save="handleSave"
      @cancel="handleCancel"
    />
    
    <UserActivityFeed 
      :activities="recentActivities"
      class="mt-4"
    />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import PageHeader from '@/components/common/PageHeader.vue';
import UserProfileCard from '@/components/user/UserProfileCard.vue';
import UserActivityFeed from '@/components/user/UserActivityFeed.vue';

export default {
  name: 'UserProfilePage',
  
  components: {
    PageHeader,
    UserProfileCard,
    UserActivityFeed
  },
  
  props: {
    userId: {
      type: String,
      required: true
    }
  },
  
  data() {
    return {
      isLoading: false,
      error: null
    };
  },
  
  computed: {
    ...mapState('user', ['userData', 'recentActivities']),
    
    pageTitle() {
      return this.userData 
        ? `Профиль: ${this.userData.name}`
        : 'Загрузка профиля...';
    }
  },
  
  created() {
    this.loadUserData();
  },
  
  methods: {
    ...mapActions('user', ['fetchUser', 'updateUser']),
    
    async loadUserData() {
      this.isLoading = true;
      this.error = null;
      
      try {
        await this.fetchUser(this.userId);
      } catch (err) {
        this.error = 'Не удалось загрузить данные пользователя';
        console.error('Ошибка загрузки:', err);
      } finally {
        this.isLoading = false;
      }
    },
    
    async handleSave(updatedData) {
      try {
        await this.updateUser(updatedData);
        this.$notify.success('Данные успешно обновлены');
      } catch (err) {
        this.$notify.error('Ошибка при сохранении');
      }
    },
    
    handleCancel() {
      this.$router.push('/users');
    }
  }
};
</script>

<style scoped lang="scss">
.user-profile-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  
  .error-message {
    color: #f44336;
    padding: 16px;
    background: #ffebee;
    border-radius: 4px;
    margin: 20px 0;
  }
  
  .mt-4 {
    margin-top: 24px;
  }
}
</style>

Этот подход обеспечивает масштабируемость, поддерживаемость и переиспользуемость кода, что критически важно для современных веб-приложений на Vue.js.