Способы использования Vue ​

Мы считаем, что для веба не существует универсального решения. Именно поэтому Vue отличается гибкостью и возможностью постепенного внедрения. В зависимости от конкретной задачи Vue можно использовать по-разному, чтобы найти оптимальный баланс между сложностью стека, удобством для разработчиков и конечной производительностью.

Автономный скрипт ​

Vue можно использовать как отдельный файл скрипта - шаг сборки не требуется! Если у вас есть бэкэнд-фреймворк, который уже рендерит большую часть HTML, или логика фронтенда не настолько сложна, чтобы оправдать шаг сборки, то это самый простой способ интегрировать Vue в ваш стек. В таких случаях можно рассматривать Vue как более декларативную замену jQuery.

Vue также предлагает альтернативный дистрибутив под названием petite-vue, который специально оптимизирован для постепенного улучшения существующего HTML. Он обладает меньшим набором функций, но очень легкий и использует реализацию, которая более эффективна в сценариях, не требующих сборки.

Встраиваемые Web-компоненты ​

С помощью Vue можно создавать стандартные веб-компоненты, которые можно встраивать в любую HTML-страницу, независимо от способа ее отображения. Эта опция позволяет использовать Vue в полной зависимости от потребителя: полученные веб-компоненты можно встраивать в устаревшие приложения, статический HTML или даже в приложения, созданные с помощью других фреймворков.

Одностраничные приложения (SPA) ​

Некоторые приложения требуют богатой интерактивности, большой глубины сессий и нетривиальной логики с сохранением состояния на фронтенде. Наилучшим способом построения таких приложений является архитектура, в которой Vue не только управляет всей страницей, но и обрабатывает обновления данных и навигацию без необходимости перезагрузки страницы. Такой тип приложений обычно называют одностраничными приложениями (SPA).

Vue предоставляет основные библиотеки и всестороннюю инструментальную поддержку с потрясающим developer experience для создания современных SPA, включая:

• Маршрутизатор на стороне клиента
• Невероятно быстрая цепочка инструментов сборки
• Поддержка IDE
• Инструменты разработчика в браузере
• Интеграции TypeScript
• Утилиты для тестирования

SPA, как правило, требуют, чтобы бэкенд открывал конечные точки API, но вы можете использовать Vue в паре с такими решениями, как Inertia.js, чтобы получить преимущества SPA, сохраняя при этом серверно-ориентированную модель разработки.

Fullstack / SSR ​

Чистые SPA на стороне клиента проблематичны, если приложение чувствительно к SEO и времени вывода контента. Это связано с тем, что браузер получает практически пустую HTML-страницу и вынужден ждать, пока загрузится JavaScript, прежде чем что-либо отобразить.

Vue предоставляет первоклассные API для "рендеринга" приложения Vue в HTML-строки на сервере. Это позволяет серверу отправлять обратно уже отрендеренный HTML, что позволяет конечным пользователям видеть содержимое сразу же, пока загружается JavaScript. Затем Vue "гидратирует" приложение на стороне клиента, делая его интерактивным. Это называется Серверный рендеринг (SSR) и значительно улучшает такие показатели Largest Contentful Paint (LCP).

На основе этой парадигмы построены более высокоуровневые фреймворки на базе Vue, например Nuxt, которые позволяют разрабатывать полнофункциональные приложения с использованием Vue и JavaScript.

JAMStack / SSG ​

Серверный рендеринг может быть выполнен заранее, если требуемые данные являются статическими. Это означает, что мы можем предварительно рендерить все приложение в HTML и предоставлять его в виде статических файлов. Это повышает производительность сайта и значительно упрощает развертывание, поскольку нам больше не нужно динамически рендерить страницы при каждом запросе. При этом Vue все равно может "гидратировать" такие приложения, обеспечивая богатую интерактивность на клиенте. Эта техника известна как Static-Site Generation (SSG), также известная как JAMStack.

Существует две разновидности SSG: одностраничная и многостраничная. В обоих случаях сайт предварительно преобразуется в статический HTML, разница заключается в следующем:

• После первоначальной загрузки страницы одностраничный SSG "гидратирует" ее в SPA. Это требует большей предварительной нагрузки на JS и затрат на гидратацию, но последующие переходы будут быстрее, поскольку требуется только частичное обновление содержимого страницы, а не перезагрузка всей страницы.

• Многостраничный SSG загружает новую страницу при каждой навигации. Плюсом является то, что в нем можно использовать минимум JS - или вообще не использовать JS, если страница не требует взаимодействия! Некоторые многостраничные SSG-фреймворки, такие как Astro, также поддерживают "частичную гидратацию" - это позволяет использовать компоненты Vue для создания интерактивных "островков" внутри статичного HTML.

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

Команда Vue также поддерживает генератор статических сайтов под названием VitePress, на котором работает этот сайт, который вы сейчас читаете! VitePress поддерживает оба варианта SSG. Nuxt также поддерживает SSG. Вы даже можете смешивать SSR и SSG для различных маршрутов в одном приложении Nuxt.

За пределами веба ​

Хотя Vue в первую очередь предназначен для создания веб-приложений, его возможности ни в коем случае не ограничиваются только браузером. Вы можете:

• создавать настольные приложения с помощью Electron
• Создавать мобильные приложения с помощью Ionic Vue
• Создавать настольные и мобильные приложения из одной кодовой базы с помощью Quasar или Tauri
• Build 3D WebGL experiences with TresJS
• Использовать Vue Custom Renderer API для создания пользовательских рендеров, ориентированных на WebGL или даже на терминал!