https://vue-faq.org - попытка охватить наиболее часто задаваемые в профильных чатах и конференциях вопросы о фронтенде в целом и Vue.js фреймворке в частности.

FAQ постоянно обновляется, текущий список тем выглядит так:

Фронтенд

  • О фронтенд фреймворках

  • Как изучать Vue?

  • SPA, PWA, SSG, SSR и CEO

  • CSS и UI библиотеки

  • Архитектура фронтенд приложений

Разработка

  • Настройка IDE

  • Создание и сборка приложения

  • Как вставлять картинки и другие ресурсы

  • Сторы - Vuex, Pinia и Composition API

  • Тестирование

  • Полезные советы

Общение с бэкендом

  • Авторизация и аутентификация

  • Протоколы. To REST или не REST?

  • Выделение API сервиса

  • Варианты сделать бэкенд

  • CORS

Деплой на сервере

  • CI/CD

  • Варианты размещения сайта

  • Шпаргалки

  • Глоссарий

Две статьи из первого пункта "О фронтенд фреймворках" для ознакомления:

Что такое "реактивность"?

Наверное, самое фундаментальное отличие программы для фронта от программы для бэка, микросервиса и даже отдельного приложения с GUI, это понятие "реактивности".

При работе на бэке программист имеет хорошие возможности управлять потоком данных. Он контролирует откуда их брать, куда передавать, кто их может изменить, всё это хоть в одном потоке, хоть в многопоточной системе.

На фронте большую роль играет фактор интерактивности UI - данные надо динамично показывать пользователю, пользователь может изменять данные, данные могут изменяться различными контрагентами (пользователь, бэкенд, внутренние вычисления). В принципе, возможно использовать обычные программистские подходы как и на бэке, - то есть, самому следить за изменениями данных в каждом месте, и проводить обновление все зависимостей. Это даст очень много бойлерплейта - рутинного повторяющегося кода. Реактивные фреймворки сильно облегчили жизнь программистам, взяв на себя заботу об этом обновлении зависимостей переменной при её изменении.

В реактивном фреймворке достаточно задать реактивную переменную и указать, что она является, например, значением input поля. При вводе пользователем в это поле значения переменная автоматически обновится, и все другие переменные, зависящие от нее, тоже. Кода писать для этого не надо.

Упрощенно, под капотом реактивная переменная это прокси-обертка над обычной, которая следит за её изменениями и регистрирует всех слушателей, которых надо оповестить об изменении переменной, чтобы они себя пересчитали.

Почему Vue?

Чтобы можно было разрабатывать и управлять большими сложными программными системами, было изобретено ООП - объектно-ориентированное программирование, где для иерархичного разбиения сложности вводились новые сущности - объекты. Они инкапсулировали в себе данные и поведение (логику).

На фронтенде немного иная ситуация из-за наличия кода на нескольких языках программирования - HTML, CSS, JavaScript. И в данном случае SFC компоненты во Vue отлично служат для разбиения сложности системы. Каждый компонент инкапсулирует HTML шаблон, его стилизацию и логику.

Vue делает это намного лучше, чем тот же React, который сваливает всё в одну кучу. В этом аспекте Vue однозначно является флагманом компонентно-ориентированного программирования (КОП) на фронтэнде.

Кроме того, во Vue 3 появилась реактивность за пределами компонент - ref и reactive переменные можно задать в простом js модуле. Это используется в composable функциях. Стало возможно отделить от представления не только реактивный сервис (useI18n, useScreenSize например), но и бизнес-логику (useShoppingCart, useNewsWidget). Это позволяет использовать на фронтенде MVC шаблон, где роли View и частично Controller выполняют компоненты, отвечающие преимущественно за визуализацию, а логика и модель (Model и частично Controller) приходятся на композабл функции и их реактивный стейт.

Это даёт возможность сделать, например, смену дизайна сайта или замену UI библиотеки намного более легкой задачей.

Данная особенность также сильно выделяет Vue на фоне других реактивных фреймворков-аналогов.

Реактивностью Vue можно пользоваться совсем без UI. Например, в этом расширении VS Code элементы Vue 3 reactive, ref и watch используются для организации реактивности в коде без визуальных компонент.

Замечания, комментарии, предложения - велком.