Веб-разработка
Vue и Angular: сравнение
Google создал Angular, Evan You создал Vue работая в Google. Оба фреймворка решают одну задачу - реактивный UI, но с разной философией. Vue: 'progressive framework' - добавляй сложность по мере необходимости. Angular: 'opinionated framework' - следуй структуре и получи предсказуемость. Понимание обоих открывает 60% рынка вакансий за пределами React.
- **Alibaba** использует Vue как основной фреймворк - создали Element Plus UI library для enterprise; Vue особенно популярен в азиатском рынке
- **Google Pay** и внутренние инструменты Google построены на Angular - показывает что создатель доверяет своему инструменту для критичных систем
- **GitLab** мигрировал frontend с jQuery на Vue - один из крупнейших публичных примеров Vue в production с открытым кодом
Reactivity: Vue vs React
Vue 3 использует Proxy-based reactivity: `ref()` и `reactive()` создают реактивные объекты, изменение которых автоматически обновляет DOM. В отличие от React, не нужно вызывать setState - присвоение `count.value++` само запускает обновление. Computed свойства кэшируются и обновляются только при изменении зависимостей.
Vue Composition API (Vue 3) vs Options API (Vue 2): Composition API группирует логику по фичам а не по типам (data/methods/computed), что улучшает переиспользование через composables. Аналог React hooks. `<script setup>` - синтаксический сахар для Composition API в SFC (Single File Component).
Чем Vue 3 Proxy-based reactivity отличается от React useState?
Директивы Vue
Директивы Vue - специальные атрибуты с префиксом `v-` для декларативного управления DOM. Встроенные: `v-if`/`v-else`/`v-show` (условия), `v-for` (списки), `v-model` (two-way binding), `v-on`/`@` (события), `v-bind`/`:` (атрибуты), `v-slot` (named slots). Кастомные директивы - для DOM-манипуляций которые нельзя выразить через props.
Разница `v-if` vs `v-show`: `v-if` полностью удаляет/добавляет элемент из DOM (дороже при частом переключении, но лучше если элемент редко нужен). `v-show` добавляет `display: none` (дешевле при частом переключении, но элемент всегда в DOM). `v-model` = `v-bind:value` + `v-on:input` - синтаксический сахар для two-way binding.
Когда использовать v-show вместо v-if?
Dependency Injection в Angular
Angular - полноценный framework с встроенным DI контейнером. Сервисы декорируются `@Injectable()` и инжектируются в компоненты через constructor. `providedIn: 'root'` создаёт singleton на уровне приложения. Это ключевое отличие от Vue/React - Angular решает инфраструктурные задачи (HTTP, routing, forms) из коробки.
Angular Signals (v17+) - ответ Angular на Vue reactive и React hooks: `signal()`, `computed()`, `effect()`. Сигналы делают change detection более точным (zone.js free). Аналог Vue ref. Angular Standalone Components (v14+) - компоненты без NgModule, ближе к Vue/React подходу.
Что означает `providedIn: 'root'` в Angular @Injectable?
Синтаксис шаблонов: сравнение
Vue, Angular и React имеют разный подход к шаблонам. Vue - HTML-like с директивами (v-if, v-for). Angular - похожий на Vue но с Angular-specific синтаксисом (@for, @if в Angular 17+, двустороннее [(ngModel)]). React - JSX, JavaScript-first с {} для выражений. Каждый подход отражает philosophy фреймворка.
Vue Single File Component (SFC) объединяет template + script + style в один .vue файл - файловая система как компонент. Angular разделяет на .ts + .html + .css файлы (или inline). React - один .tsx файл с JSX. SFC в Vue и Svelte - наиболее читаемый подход для HTML-разработчиков. JSX - более мощный для программистов.
Angular устарел и не используется в современной разработке
Angular активно развивается: Signals (v17), Standalone Components, Deferrable Views, SSR улучшения. Доминирует в enterprise и финансовых компаниях (Deutsche Bank, Samsung). Для больших корпоративных приложений Angular строгость и полный framework - преимущество, а не недостаток
Vue и React популярнее в стартапах за гибкость; Angular популярнее в enterprise за predictability и встроенный DI, HTTP, forms, routing
Какое главное преимущество Vue SFC над разделением на отдельные .ts/.html/.css файлы как в Angular?
Ключевые идеи
- **Vue 3 Reactivity** - Proxy-based автоматическое отслеживание; ref()/reactive() + computed() + watch(); Composition API с composables для переиспользования логики
- **Vue Директивы** - v-if vs v-show (DOM vs display:none), v-for с key, v-model (two-way binding), event modifiers @click.prevent
- **Angular DI** - встроенный DI контейнер, @Injectable providedIn: 'root', Signals (v17+) для реактивности; полный framework vs progressive Vue
Связанные темы
Vue и Angular работают в экосистеме с State Management и TypeScript:
- State Management — Pinia - официальный state manager для Vue 3; NgRx/NGXS для Angular - паттерн Flux/Redux адаптированный для фреймворков
- TypeScript для веба — Angular built on TypeScript; Vue 3 с <script setup lang='ts'> даёт excellent TS support и type-safe шаблоны
Вопросы для размышления
- Если команда из 5 человек строит enterprise banking app с строгими требованиями к consistency - Vue, Angular или React? Обоснование?
- Vue Composition API и React Hooks решают одну задачу - переиспользование stateful логики. В чём принципиальная разница в подходе?
- Когда имеет смысл использовать v-show вместо v-if для элемента который показывается ~30% времени?