Как перешел с Angular на Vue?

Переход с Angular на Vue: методология и опыт

Angular и Vue — это два мощных фреймворка, но они кардинально отличаются философией. Angular — это всеобъемлющая экосистема с TypeScript по умолчанию, сложной архитектурой и много боилерплейта. Vue — это прогрессивный фреймворк, который можно начать с простых интерпретаций и постепенно усложнять. Переход был поэтапным процессом переучивания парадигм и переосмысления подхода к разработке компонентов.

Основные различия между Angular и Vue

// ============================================
// ANGULAR: Component с декораторами
// ============================================
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
    </div>
  `,
})
export class CounterComponent {
  @Input() initialCount: number = 0;
  @Output() countChanged = new EventEmitter<number>();

  count: number = this.initialCount;

  increment() {
    this.count++;
    this.countChanged.emit(this.count);
  }

  decrement() {
    this.count--;
    this.countChanged.emit(this.count);
  }
}

// ============================================
// VUE: Component с опциональным API (легче перейти)
// ============================================
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  props: {
    initialCount: {
      type: Number,
      default: 0,
    },
  },
  emits: ['countChanged'],
  data() {
    return {
      count: this.initialCount,
    };
  },
  methods: {
    increment() {
      this.count++;
      this.$emit('countChanged', this.count);
    },
    decrement() {
      this.count--;
      this.$emit('countChanged', this.count);
    },
  },
};
</script>

// ============================================
// VUE 3: Composition API (более близко к современному JS)
// ============================================
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

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

const props = defineProps({
  initialCount: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(['countChanged']);

const count = ref(props.initialCount);

function increment() {
  count.value++;
  emit('countChanged', count.value);
}

function decrement() {
  count.value--;
  emit('countChanged', count.value);
}
</script>

Ключевые различия для успешного перехода

1. Реактивность вместо Dependency Injection

В Angular всё построено на DI контейнере, сервисах и провайдерах. Это мощно для больших приложений, но утомительно для простых случаев. Vue использует реактивную систему: вы просто объявляете данные, и Vue автоматически отслеживает изменения.

2. Шаблоны вместо TypeScript декораторов

Angular полагается на TypeScript классы и декораторы (@Component, @Injectable). Vue использует обычный JavaScript с шаблонами HTML. Это ближе к нативному веб-развитию.

3. Простоту и постепенное усложнение

Angular требует полную настройку сразу. Vue позволяет начать просто (как jQuery) и постепенно добавлять сложность (маршрутизация, состояние, build tools). Это философия прогрессивного фреймворка.

Что я переучивал при переходе

// ANGULAR: RxJS Observables везде
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-user-list',
  template: `<div>{{ (users$ | async)?.length }} users</div>`,
})
export class UserListComponent implements OnInit {
  users$: Observable<User[]>;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.users$ = this.userService.getUsers();
  }
}

// ============================================

// VUE: Async/await и ref
<template>
  <div>{{ users.length }} users</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { userService } from './userService';

const users = ref([]);

onMounted(async () => {
  users.value = await userService.getUsers();
});
</script>

Кривая обучения и лучшие практики

Мой путь: Месяц изучал синтаксис Vue, ещё месяц переучивал мозг на реактивность вместо Observables. Angular требует думать о RxJS операторах (map, filter, switchMap), в Vue просто используешь async/await как в обычном JavaScript.

Лучшие практики при переходе:

1. Начни с Options API, затем переходи на Composition API
2. Используй TypeScript в Vue — это облегчит переход
3. Вместо RxJS используй Promise и async/await
4. Вместо модулей (@NgModule) используй скрипты и импорты
5. Состояние приложения: вместо NgRx используй Pinia или Vuex

Итоговое впечатление

Angular мощный, но тяжёлый. Vue гибкий и лёгкий. Для больших корпоративных приложений Angular хорош (типизация, структура), для стартапов и средних проектов Vue — идеален. Я не жалею о переходе, потому что код стал проще, разработка быстрее, а результат тот же.