Фото від Rahul Mishra на Unsplash
Vue.js — це прогресивний JavaScript фреймворк. Це легкий фреймворк, призначений для створення інтерфейсів користувача. Термін "прогресивний" означає, що Vue можна поступово впроваджувати в додаток, починаючи з малих функцій і поступово переходячи до складних, повнофункціональних додатків, використовуючи його екосистему та інструменти. Vue.js є відмінним вибором для поетапного покращення існуючих веб-додатків, таких як ті, що побудовані з використанням фреймворків, як-от ASP.NET MVC, що дає змогу розробникам додавати сучасні інтерактивні компоненти без переписування всього додатку, на відміну від таких фреймворків, як Angular. Angular вимагає будувати весь додаток, оскільки цей фреймворк нав’язує спосіб організації та структурування додатку.
Проекти на Vue можна створювати за допомогою сучасного інструменту для складання — Vite, який надає швидке та ефективне середовище для розробки.
Vue CLI, хоча і залишається функціональним, більше не підтримується активно та вважається менш оптимальним у порівнянні з Vite для нових проектів. Додатки на Vue можна писати як на JavaScript, так і на TypeScript.
Vite спрощує процес створення шаблонного коду та управління залежностями, пропонуючи ефективний і зручний для розробників спосіб налаштування проектів на Vue.js.
Наступний приклад демонструє просту веб-сторінку, що показує функціонал однонаправленого та двонаправленого зв'язування даних. У цьому прикладі змінна message прив'язана до UI, а двонаправлене зв'язування даних реалізовано за допомогою v-model, що аналогічно [(ngModel)] в Angular. Будь-які зміни, внесені користувачем в текстове поле HTML, автоматично відображаються в властивості message та застосовуються до елемента span. “el” вказує на id елемента, до якого має бути підключено Vue.js додаток. V-model — це вбудована директива у Vue.js, яка використовується для реалізації двонаправленого зв'язування даних.
Нижче наведений приклад використовує Vue 2, який підключається через CDN за допомогою тегу script.
{{message}} Edit :
``` Наступний код демонструє ту ж саму функціональність, що й вище, але він написаний на Vue 3. Vue 3 вводить метод createApp для створення додатку. Метод Mount є заміною для властивості ‘el’, яка використовувалася в Vue 2 для монтування додатку. Метод Mount використовується для прив'язки Vue-додатку до HTML елемента — тегу div.
createApp використовується для ініціалізації Vue-додатку.
{{message}} Edit :
``` Подібно до Angular, ми можемо структурувати веб-додаток як ієрархію — дерево компонентів, що взаємодіють один з одним.
Angular використовує функцію Shadow DOM у браузерах для інкапсуляції стилів CSS в компонентах, тоді як Vue.js використовує функцію scoped styles для досягнення того ж результату.
Angular є повноцінним фреймворком, що надає великий набір функцій і вимагає певного способу побудови додатків, що може бути корисним для великих застосунків, але для менших додатків це може бути надмірним. Vue.js використовує концепцію virtual DOM для керування оновленнями інтерфейсу користувача. Virtual DOM — це легковажне представлення реального DOM в пам'яті. Vue миттєво оновлює інтерфейс, коли дані змінюються в моделі, використовуючи концепцію ES6 Proxy для досягнення цієї реактивності. Процес у Angular складніший, оскільки Angular запускає детектор змін для пошуку змінених властивостей і відповідного оновлення UI.
Цей процес є складним і може стати вузьким місцем продуктивності в певних додатках.
Також ознайомтесь з моєю статтею про Angular: https://www.linkedin.com/pulse/angular-refresher-key-concepts-developers-sridhar-rajan-venkataramani-82vbc
Перекладено з: Introduction to Vue JS