Загальні основи Vue 3 та його головних бібліотек

Головна мета лекції - навчити основному функціоналу Vue 3 та його найважливіших бібліотек в екосистемі, щоб після її перегляду будь-яка людина зі знаннями HTML, CSS та JavaScript змогла почати самостійно створювати нескладні додатки на Vue 3 із використанням сучасних підходів. У лекції ми заглибимося не тільки у використання бібліотек та синтаксису Vue, а також подивимося, як насправді виглядають компоненти після компіляції у звичайний JavaScript, дізнаємося, що таке Virtual Dom та чому Vue від нього відходить.

Розглянемо різні варіанти написання компонентів у Vue:

• Composition API, із setup та без, який з'явився у 3-й версії, і є сучасним варіантом написання компонентів, використовуючи популярний підхід сигналів
• Options API, який перейшов із Vue 2, і досі залишається популярним варіантом написання компонентів

Пройдемося по головним директивам, функціям та макросам, щоб побачити, як працювати з даними. Наприклад, як записувати дані з v-model, як вивести список даних через v-for, що за "магія" з defineProps та в чому різниця між ref та reactive.

Окрім головного функціоналу Vue 3, ми обов'язково використаємо його основні бібліотеки:

• Vue Router - бібліотека для створення багатосторінкового додатку та захисту сторінок від неавторизованих користувачів
• Pinia - бібліотека для збереження та доступу даних поза компонентами
• Vee Validate - зручна бібліотека для валідації форм + Zod для обробки різних валідаційних правил
• VueUse - бібліотека з набором готових утилітарних функцій, які спрощують життя
• TailwindCSS - бібліотека для зручного написання стилів

Всю теорію ми закріпимо на прикладі створення to-do списку.