ВСТУП У VUE: З ЧОГО ПОЧАТИ І ЯК НЕ ЗАПЛУТАТИСЯ
Поглядаючи одним оком на ринок зараз, складно сказати, в якому саме фреймворку зараз більше потреба: у Vue, React, чи Angular. Однак ви всі й так знаєте, що початківці у фронтенд вибирають частіше за все React або Vue для старту. І цьому, само собою, є дуже просте пояснення. Це пояснення звучить вже звично — «низький поріг входу».
Тож сьогодні я хочу розповісти вам все (майже) про цей фреймворк, але коротко і зрозуміло, щоб ви прийняли своє рішення що саме вибрати для того, щоб почати свій шлях, або продовжити його, розвиваючись і вивчаючи нові технології.
ЩО ТАКЕ VUE
Звісно, якщо ви щось вже читали про Vue, то точно бачили фразу «це прогресивний фреймворк», але що ж це все-таки значить?
Частіше за все тут мається на увазі його гнучкість, можливість впроваджувати його в ваш проєкт поступово (далі поясню, як це). Його поступовість криється в тому, що Vue не змушує вас одразу писати на ньому весь проєкт, або за допомогою нього «ламати» весь легасі код, ні.
Ви можете легко підключити Vue по CDN і писати скрипти через нього, або збирати на ньому окремі форми й компоненти, поступово заповнюючи ним проєкт, або взагалі повністю створити SPA з усіма поінтами типу маршрутизації, стану й API, само собою. Ось такий він, справжній Vue — ненавʼязливий, гнучкий і підлаштовується до ваших потреб. Це мені в ньому і подобається.
Сам фреймворк за чутками був написаний тоді, коли автору, Евану Ю, набридла складність і масштабність Angular. От так просто, так:) Спираючись на це, можна сказати, що Vue — це на мою думку вдала спроба зробити фронтенд більш приємним, передбачуваним і логічним.
ПОПУЛЯРНІСТЬ VUE
Vue — це якийсь майже ідеальний баланс між простотою та ефективністю. Давайте чітко окреслимо чому саме так:
- як ми вже зрозуміли, Vue легкий в освоєнні і дозволяє розробникам не «пірнати з головою» у всі складнощі фреймворку і його підкапотних процесів;
- можна використовувати як для зовсім невеликих, так і для великих корпоративних проєктів;
- документація Vue — це той випадок, коли шукав мідь, а знайшов золото. Велетенська купа прикладів, де все дуже чітко розкладається по поличках;
- дуже активна й жива спільнота — купа репозиторіїв, сторінок на форумах, дуже багато зручних і корисних користувацьких плагінів та бібліотек
ГОЛОВНЕ ПРО VUE
Одна з основних фішок Vue — це декларативний підхід. Це означає, що ви описуєте не послідовність дій, яка призводить до певного стану (імперативний підхід), а сам стан, який бажаєте побачити в результаті.
Це полегшує життя, тому що за допомогою декларативності Vue автоматично оновлює DOM, код стає більш читабельним, бо банально того коду менше. Читаючи це все, ви могли вдаватись у запитанням, як ця декларативність реалізована у Vue.
Тут ми підходимо до питання реактивності у Vue.
РЕАКТИВНІСТЬ У VUE
Але спочатку я хочу окреслити, що таке реактивне програмуваннязагалом.
Реактивне програмування — це декларативна сукупність понять і уявлень (читайте як «декларативна парадигма»), що стосується потоків даних та поширення змін. Простіше кажучи, коли змінюється якийсь один фрагмент даних, то усі залежності, які покладаються на ці дані, автоматично оновлюються.
СИСТЕМА РЕАКТИВНОСТІ VUE
Перший етап — реактивне звʼязування даних. Reactive data binding.
Як ми зрозуміли з частини про реактивне програмування, то система реактивного звʼязування даних синхронізує стан застосунку з DOM-деревом. Це означає, що будь-які зміни стану застосунку будуть миттєво відображені на інтерфейсі користувача. Досягається це за допомогою проксі-серверів (Proxy API) JavaScript і системи реактивності, яка відстежує залежності.
Другий етап — обчислювальні властивості. Computed properties.
Коротко кажучи — це функції, які обчислюють значення на основі реактивних (динамічних/тих, які змінюються) даних. Це не методи, як ви могли подумати, бо на відміну від методів, обчислювальні властивості кешуються і перераховуються лише в тому випадку, якщо змінюються їхні залежності. Через таке кешування значно покращується продуктивність, уникаючи непотрібних перерахунків і оновлень.
Третій етап — спостерігачі. Watchers.
Спостерігачі — це гнучкий спосіб реагування на зміну даних у стані застосунку. Спостерігачі дозволяють розробникам писати і виконувати власну логіку у відповідь на зміни певних властивостей даних.
Вам може здатися, що обчислювальні властивості можуть впоратися з цією задачею і використовувати спостерігачі зовсім немає сенсу, але це не так. Спостерігачі можуть бути корисними для виконання асинхронних операцій, або складної логіки, яка базується на зміні даних.
РЕАКЦІЙНА ЗДАТНІСТЬ КОМПОНЕНТІВ
Кожен компонент у Vue за своєю суттю є реактивним. Кожен компонент керує своїм власним станом і може повідомляти про зміни стану батьківським і дочірнім компонентам через властивості й події. Така інкапсуляція стану і поведінки — це модульність і зручна підтримка проєкту.
Саме на цьому будується ефективність цього фреймворку і за це його так люблять (але не тільки за це). Саме це дозволяє розробникам створювати ефективні й динамічні додатки.
ФОРМИ Й УМОВНИЙ РЕНДЕРИНГ У VUE
Дуже часто реактивність Vue починаєш відчувати на практиці саме з форм. Наприклад, завдяки v-model ми можемо прив’язати інпут до реактивної змінної — і мати повний контроль над формою, її валідацією, станом і логікою.
Так само з умовним рендерингом — v-if дозволяє прибирати або показувати елементи залежно від змінної. І це справді зручно.
ОСНОВИ СИНТАКСИСУ
Перейдемо до більш прикладного. Це буде своєрідною шпаргалкою щодо найчастіше використовуваному синтаксису, але спочатку ремарка.
ЩО ТАКЕ КОМПОНЕНТ У VUE
Компонент — це ізольований фрагмент інтерфейсу, який має свій шаблон, логіку та стиль. Компоненти дозволяють створювати багаторазові блоки UI.
Чому компоненти важливі
- Вони дозволяють інкапсулювати логіку
- Знижують дублювання коду
- Полегшують тестування і масштабування
Vue 3 підтримує два основних стилі написання компонентів:
- Options API: якщо ви працювали з Vue 2, то це має бути вам знайомим, вважається класикою;
- Composition API: новий, більш гнучкий і рекомендується для складних компонентів.
Ви можете писати на Vue 3, обравши варіант, який вам більше до душі.
Спочатку я хочу наочно показати різницю між цими двома варіантами написання, взявши до прикладу простий компонент. А потім вже підемо в загальне.
Приклад з Options API
<template>
<div class="counter">
<p>Значення: {{ count }}</p>
<p>Подвоєне значення: {{ doubled }}</p>
<button @click="increment">+</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
computed: {
doubled() {
return this.count * 2
}
},
methods: {
increment() {
this.count++
}
},
watch: {
count(newVal) {
console.log('Значення змінилось:', newVal)
}
},
mounted() {
console.log('Компонент змонтовано')
}
}
</script>
<style scoped>
.counter {
background-color: lightblue;
}
</style>Той самий компонент, написаний за допомогою Composition API:
<template>
<div class="counter">
<p>Значення: {{ count }}</p>
<p>Подвоєне значення: {{ doubled }}</p>
<button @click="increment">+</button>
</div>
</template>
<script setup>
import { ref, computed, watch, onMounted } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
const increment = () => {
count.value++
}
watch(count, (newVal) => {
console.log('Значення змінилось:', newVal)
})
onMounted(() => {
console.log('Компонент змонтовано')
})
</script>
<style>
.counter {
background-color: lightblue;
}
</style>ОСНОВИ СИНТАКСИСУ
У Vue 3 для створення застосунку використовується функція createApp():
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')Це дозволяє мати кілька застосунків на сторінці та краще контролювати життєвий цикл застосунку.
ШАБЛОНИ З ПОДВІЙНИМИ ДУЖКАМИ {{ }}
Використовуються для виводу значень у шаблоні. При зміні реактивних даних ці значення автоматично оновлюються:
<p>{{ message }}</p>ДИРЕКТИВИ (v-if, v-for, v-bind, v-model, v-on)
Vue 3 надає набір директив — спеціальних атрибутів для додавання логіки в шаблон:
- v-if — умовний рендеринг
- v-for — рендеринг списку
- v-bind (:) — прив'язка атрибутів
- v-model — двостороннє зв'язування з формами
- v-on (@) — обробка подій
ОДНОСТОРІНКОВІ ЗАСТОСУНКИ (SPA)
Про те, що таке SPA і зараз говорити не будемо, бо в нас вже є стаття, де ця тема повністю розкрита. Тож ви можете прочитати це тут. З цим розібралися, тому перейдемо до суті.
ЯК VUE ДОЗВОЛЯЄ БУДУВАТИ SPA?
Vue має офіційний маршрутизатор — Vue Router. З його допомогою ви можете налаштувати сторінки, які виглядають як окремі URL, але насправді не перезавантажують сторінку.
import { createRouter, createWebHistory } from 'vue-router'СТАН ЗАСТОСУНКУ
Стан у Vue 3 створюється через ref() або reactive(). Vue сам стежить за цим станом, і будь-які шаблони, які на нього посилаються, автоматично оновлюються при його зміні. Це дуже зручно.
ОБРОБКА ПОДІЙ
Обробка подій у Vue 3 виглядає дуже просто і працює так, що розібратися з цим буде зовсім не складно. Фреймворк використовує @click, @input, @submit для обробки подій:
<button @click="doSomething">Клікни мене</button>ПОРАДИ ПОЧАТКІВЦЯМ
Усі ми були в чомусь новачками та всі робили помилки. Щось ламало весь застосунок, а щось навіть працювало, але по факту було «милицею» і так робити краще не треба. Давайте швиденько пробіжимося по тому, які помилки роблять найчастіше у Vue.
- Надмірне використання watch, де достатньо computed
- Несанкціоноване використання this у Composition API
- Відсутність key у v-for
Також радимо вам спочатку гарно розібратись у простих ref і computed, а потім вже переходити до складніших і більш наворочених Pinia чи Vuex (офіційно рекомендують Pinia). Це допоможе вам робити якнайкраще — спочатку кор, а потім все інше.
ВИСНОВОК
Vue 3 — це інструмент, який дійсно дає вам вибір. Ви можете почати дуже просто, написати перший компонент за 10 хвилин, нічого не ламаючи. І поступово, крок за кроком, переходити до складніших речей: до роутів, глобального стану, API-запитів, асинхронної логіки й так далі.
Ми називаємо це фреймворком, який не примушує, а допомагає. У нього нормальна, навіть чудова, документація, він легкий для новачка і достатньо потужний для складних застосунків. Якщо ви шукаєте щось, що не ламає мозок, але все одно дозволяє зростати як розробнику, то Vue 3, як мінімум, вартий того, щоб дати йому шанс.
Почніть із простого — навіть лічильника. А далі вже втягнетеся. А ми, як завжди, зустрінемося в цьому ж місці в той самий час!
