Форматы использования Vue на работе

Vue предоставляет несколько форматов разработки в зависимости от подхода и требований проекта. Рассмотрим основные форматы, которые используются в современной разработке.

Single File Components (SFC)

Single File Components — это основной и рекомендуемый формат для Vue 3. В одном .vue файле размещаются шаблон, скрипт и стили.

<template>
  <div class="component">
    <h1>{{ message }}</h1>
    <button @click="increment">Увеличить: {{ count }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const message = ref("Привет, Vue!");
const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

<style scoped>
.component {
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

Преимущества SFC:

• Инкапсуляция: логика, шаблон и стили находятся вместе
• Scoped CSS: стили автоматически изолированы от других компонентов
• Оптимизация: компилятор Vue оптимизирует и минифицирует код
• Удобство: не нужно писать шаблоны в строках или отдельных файлах

Composition API vs Options API

В файле .vue можно использовать два подхода организации логики:

Options API (классический подход):

export default {
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};

Composition API (современный подход, рекомендуется):

import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    const increment = () => {
      count.value++;
    };

    return { count, doubleCount, increment };
  },
};

Дополнительно в Vue 3 есть синтаксис <script setup>, который упрощает Composition API:

<script setup>
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
</script>

Server-Side Rendering (SSR) и Hydration

Для приложений с SSR Vue может использовать серверное отображение:

import { createSSRApp } from "vue";
import App from "./App.vue";

const app = createSSRApp(App);

JSX / TSX формат

Некоторые проекты используют JSX вместо шаблонов Vue:

const Counter = () => {
  const count = ref(0);
  return () => (
    <div>
      <h1>{count.value}</h1>
      <button onClick={() => count.value++}>Увеличить</button>
    </div>
  );
};

Выбор формата на работе

Выбор формата зависит от:

• Размера команды: большие команды часто используют SFC для удобства
• Legacy кода: старые проекты могут использовать Options API
• Требования к производительности: JSX может быть оптимальнее для сложных компонентов
• Инструментарий: modern setup обычно требует SFC + Composition API

Best practices для современного проекта:

• Использовать SFC с <script setup>
• Применять Composition API для переиспользуемой логики
• Типизировать с TypeScript
• Организовать файлы по features, не по типам

На большинстве современных работ используется именно эта комбинация: Vue 3 + SFC + Composition API + TypeScript.