Для чего используешь Vue.js компоненты?

Использование Vue.js компонентов

Вопрос интересный. Нужно уточнить - я с Vue.js работаю в определенных контекстах, но в основном мой опыт - это React. Расскажу о обоих и когда использую каждый.

Когда использую Vue.js компоненты

Проекты, где Vue - основной фреймворк

• Наследуемые проекты, где Vue уже установлен
• Новые проекты, где команда выбрала Vue
• Интеграция в существующие Vue приложения

Плюсы Vue компонентов

• Простота синтаксиса - шаблоны ближе к HTML
• Single File Components (.vue) - всё в одном файле (template, script, style)
• Реактивность - меньше боли с state management
• Легче для новичков - более интуитивный синтаксис

<!-- MyComponent.vue - весь компонент в одном файле -->
<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <button @click="count++">
      Count: {{ count }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue',
      count: 0
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>

Сравнение: Vue vs React

Vue компоненты

<!-- Vue способ -->
<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { message: '' }
  }
}
</script>

React компоненты

// React способ
import { useState } from 'react';

export function MyComponent() {
  const [message, setMessage] = useState('');
  
  return (
    <div>
      <input 
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <p>{message}</p>
    </div>
  );
}

Архитектура Vue компонентов

// 1. Presentational (дунбые) компоненты
// Используют только props, не имеют своего state

export default {
  name: 'UserCard',
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  template: `
    <div class="card">
      <h3>{{ user.name }}</h3>
      <p>{{ user.email }}</p>
    </div>
  `
}

// 2. Container (умные) компоненты
// Содержат логику, получают данные, управляют state

export default {
  name: 'UserList',
  data() {
    return {
      users: [],
      loading: false
    }
  },
  async mounted() {
    this.loading = true;
    this.users = await fetchUsers();
    this.loading = false;
  },
  components: {
    UserCard
  }
}

Практические примеры использования

Компонент с формой

<template>
  <form @submit.prevent="submit">
    <div>
      <label>Name:</label>
      <input v-model="form.name" required />
    </div>
    <div>
      <label>Email:</label>
      <input v-model="form.email" type="email" required />
    </div>
    <button type="submit" :disabled="loading">
      {{ loading ? 'Saving...' : 'Save' }}
    </button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      loading: false
    }
  },
  methods: {
    async submit() {
      this.loading = true;
      try {
        await api.saveUser(this.form);
        this.$emit('success', this.form);
      } catch (error) {
        console.error('Failed to save:', error);
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

Компонент со списком и фильтрацией

<template>
  <div>
    <input 
      v-model="searchQuery"
      placeholder="Search..."
      @input="filterItems"
    />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: Array
  },
  data() {
    return {
      searchQuery: '',
      filteredItems: []
    }
  },
  watch: {
    searchQuery(newVal) {
      this.filterItems();
    },
    items: {
      handler() {
        this.filterItems();
      },
      deep: true
    }
  },
  methods: {
    filterItems() {
      if (!this.searchQuery) {
        this.filteredItems = this.items;
        return;
      }
      
      const query = this.searchQuery.toLowerCase();
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(query)
      );
    }
  },
  mounted() {
    this.filterItems();
  }
}
</script>

Lifecycle хуки Vue (эквивалент React useEffect)

export default {
  mounted() {
    // Компонент добавлен в DOM
    // Эквивалент: useEffect(() => {...}, [])
    this.loadData();
  },
  
  updated() {
    // Компонент обновлен
    // Эквивалент: useEffect(() => {...}, [dependencies])
    console.log('Component updated');
  },
  
  beforeUnmount() {
    // Перед удалением компонента
    // Эквивалент: useEffect(() => { return () => {...} }, [])
    this.cleanup();
  }
}

Vue 3 Composition API (похож на React Hooks)

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0); // похож на useState
    const items = ref([]);
    
    const increment = () => {
      count.value++;
    };
    
    onMounted(() => {
      // Загрузить данные
      items.value = fetchItems();
    });
    
    return {
      count,
      items,
      increment
    }
  }
}

Когда Vue лучше React

Vue лучше когда:

• Прототипирование (быстрее писать)
• Маленькие команды (меньше конфигурации)
• Новички в фронтенде (проще для обучения)
• Нужна простая реактивность

React лучше когда:

• Большие, сложные приложения
• Нужна большая гибкость
• Экосистема и инструменты (Next.js, etc.)
• Больше разработчиков на рынке

Мой подход

• Использую инструмент, который подходит для задачи
• Если это Vue проект - пишу Vue компоненты
• Если это React проект - пишу React компоненты
• Оба фреймворка решают одинаковые проблемы по-разному
• Важнее всего - понимать принципы компонентного мышления

Вывод

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