Способи використання Vue
Ми вважаємо, що в Інтернеті не існує «одного розміру для всіх». Ось чому Vue розроблений як гнучкий і поетапно адаптований. Залежно від вашого випадку використання Vue можна використовувати різними способами, щоб досягти оптимального балансу між складністю стеку, досвідом розробника та кінцевою продуктивністю.
Автономний сценарій
Vue можна використовувати як самостійний файл сценарію - жодного етапу створення не потрібно! Якщо у вас є бекенд-фреймворк, який уже рендерить більшу частину HTML, або ваша інтерфейсна логіка недостатньо складна, щоб виправдати крок збірки, це найпростіший спосіб інтегрувати Vue у ваш стек. Ви можете думати про Vue як про більш декларативну заміну jQuery в таких випадках.
Vue також надає альтернативний дистрибутив під назвою petite-vue, який спеціально оптимізований для поступового вдосконалення існуючого HTML. Він має менший набір функцій, але надзвичайно легкий і використовує реалізацію, яка є більш ефективною у сценаріях без етапів збирання.
Вбудовані вебкомпоненти
Ви можете використовувати Vue для створення стандартних вебкомпонентів, які можна вставляти в будь-яку HTML-сторінку, незалежно від того, як вони відображаються. Ця опція дозволяє використовувати Vue абсолютно незалежно від споживачів: отримані веб-компоненти можна вбудовувати в застарілі програми, статичний HTML або навіть програми, створені за допомогою інших фреймворків.
Одно-сторінковий додаток (SPA)
Деякі програми вимагають багатої інтерактивності, глибокої глибини сеансу та нетривіальної логіки стану на інтерфейсі. Найкращий спосіб створення таких додатків — використовувати архітектуру, де Vue не тільки контролює всю сторінку, але й обробляє оновлення даних і навігацію без необхідності перезавантажувати сторінку. Цей тип програми зазвичай називають одно-сторінковий додаток (SPA).
Vue надає основні бібліотеки та повну підтримку інструментів із чудовим досвідом розробника для створення сучасних SPA, зокрема:
- Клієнтський маршрутизатор
- Надзвичайно швидкий інструментальний ланцюг — Підтримка IDE
- Інструменти розробки браузера — Інтеграція TypeScript
- Засоби тестування
SPA зазвичай вимагають серверної частини для надання кінцевих точок API, але ви також можете поєднати Vue з такими рішеннями, як Inertia.js, щоб отримати переваги SPA, зберігаючи модель розробки, орієнтовану на сервер.
Fullstack / SSR
Чисті SPA на стороні клієнта є проблематичними, якщо програма чутлива до SEO та часу до вмісту. Це пов’язано з тим, що браузер отримає здебільшого порожню HTML-сторінку, і йому доведеться зачекати, поки завантажиться JavaScript, перш ніж щось відобразити.
Vue надає першокласні API для «рендерингу» програми Vue у рядки HTML на сервері. Це дозволяє серверу надсилати назад уже відтворений HTML, дозволяючи кінцевим користувачам бачити вміст одразу під час завантаження JavaScript. Потім Vue «гідратує» програму на стороні клієнта, щоб зробити її інтерактивною. Це називається рендерингом на стороні сервера (SSR) і значно покращує показники Core Web Vital, наприклад найбільш змістовне промальовування (LCP).
Існують фреймворки вищого рівня на основі Vue, створені на основі цієї парадигми, як-от Nuxt, які дозволяють розробляти повну програму за допомогою Vue і JavaScript.
JAMStack / SSG
Візуалізацію на стороні сервера можна виконати заздалегідь, якщо необхідні дані є статичними. Це означає, що ми можемо попередньо відобразити всю програму в HTML і обслуговувати їх як статичні файли. Це покращує продуктивність сайту та значно спрощує розгортання, оскільки нам більше не потрібно динамічно відображати сторінки за кожним запитом. Vue все ще може гідратувати такі програми, щоб забезпечити багату інтерактивність на клієнті. Ця техніка зазвичай називається генерація статичного додатку (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 або Tauri
- Створюйте мобільні програми за допомогою Ionic Vue
- Створюйте настільні та мобільні додатки з однієї кодової бази за допомогою Quasar
- Використовуйте Custom Renderer API Vue, щоб створювати користувацькі рендерери, націлені на WebGL або навіть на термінал. )!