Vue-faq.org — FAQ о фронтенде в целом и Vue в частности / Хабр
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
Деплой на сервере
Две статьи из первого пункта “О фронтенд фреймворках” для ознакомления:
Что такое “реактивность”?
Наверное, самое фундаментальное отличие программы для фронта от программы для бэка, микросервиса и даже отдельного приложения с 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 используются для организации реактивности в коде без визуальных компонент.
Замечания, комментарии, предложения – велком.
