Что такое VueJS?
Это прогрессивный JavaScript фреймворк с открытым исходным кодом, предназначенный для разработки пользовательского интерфейса. Он является одним из самых популярных фреймворков для упрощения веб-разработки. VueJS работает в основном с уровнем представления. Его с лёгкостью можно интегрировать в большие проекты для фронт-енд разработки.
Устанавливается VueJS очень просто. Для разработчика разобраться в нем и начать создавать пользовательские веб-интерфейсы – это всего лишь вопрос небольшого времени.
Функции
Ниже представлены функции VueJS.
Virtual DOM
VueJS использует Virtual DOM, как и такие известные фреймворки, как React, Ember и т.д. Изменения не вносятся в DOM, а создаётся копия DOM, выступающая в форме JavaScript структуры данных. Если нужно внести изменения, то они вносятся в JavaScript структуры данных, и последние сравниваются с исходной структурой данных. Потом окончательные изменения вносятся в реальный DOM, и их пользователь уже сможет наблюдать. Такой подход хорош в плане оптимизации, он не требует задействования большого количества ресурсов и изменения будут происходить гораздо быстрее.
Привязка данных
Функция привязки данных помогает управлять значениями или присваивать их HTML-атрибутам, изменять стили, присваивать классы с помощью привязывающей директивы VueJS v-bind.
Компоненты
Компоненты – это очень важная функция VueJS, помогающая создать пользовательскме элементы, которые можно повторно использовать в HTML.
Управление событиями
v-on – это атрибут, который добавляется к элементам DOM, чтобы прослушивать события в VueJS.
Анимация/Переходы
VueJS обеспечивает множество способов применять переходы к HTML-элементам, когда их добавляют /обновляют или убирают из DOM. VueJS имеет встроенный компонент переходов, который нужно обернуть вокруг элемента для создания эффекта перехода. Можно также легко добавить сторонние библиотеки анимации.
Вычисляемые свойства
Это следующая важная функция VueJS. Она помогает прослушивать изменения, внесённые в элементы UI, и выполняет необходимые вычисления. Для этого нам не нужно писать дополнительный код.
Шаблоны
VueJS представляет шаблоны, основанные на HTML, которые связывают DOM с данными экземпляра Vue. Vue компилирует шаблоны в функции Render виртуального DOM. Вы можете использовать шаблон функций Render, для этого нужно заменить шаблон render-функцией.
Директивы
VueJS имеет такие встроенные директивы как v-if, v-else, v-show, v-on, v-bind и v-model, которые используются для выполнения различных действий во фронт-енд.
Наблюдатели
Наблюдатели применяются к изменяемым данным. Например, для вводимых элементов. В данном случае нам не нужно добавлять дополнительные события. Наблюдатель следит за изменениями данных, этим самым делая код проще и быстрее.
Маршрутизация
Навигация между страницами выполняется с помощью vue-router.
Компактность
VueJS скрипт очень компактный, что обеспечивает высокую производительность.
Vue-CLI
VueJS может быть установлен из командной строки с помощью интерфейса командной строки vue-cli. Он помогает быстро создавать и компилировать проект с помощью vue-cli.
Сравнение с другими фреймворками
Давайте теперь сравним VueJS с такими фрейморками как React, Angular, Ember, Knockout и Polymer.
VueJS и React
Virtual DOM
Virtual DOM – это виртуальное представление дерева DOM. Благодаря виртуальному DOM создаётся тот же самый объект JavaScript, что и в настоящем DOM. Каждый раз, когда нам нужно внести изменения в DOM, создаётся новый JavaScript объект и выполняются изменения. Позже оба JavaScript объекта сравниваются и финальные изменения вносятся в реальный DOM.
И VueJS, и React используют виртуальный DOM, что ускоряет их работу.
Шаблон и JSX
VueJS использует html, js и css по отдельности. Начинающему разработчику не составит труда разобраться и освоить стиль VueJS. Подход VueJS, основанный на шаблонах – это очень просто. React использует jsx-подход. Для ReactJS абсолютно всё – это JavaScript. HTML и CSS являются частью JavaScript.
Программы установки
React использует create react app, а VueJS – vue-cli /CDN/npm. Оба фреймворка просты в использовании, а проект отвечает всем базовым требованиям. В отличие от VueJS, React для создания нуждается в webpack. В случае VueJS мы можем начать кодировать в jsfiddle или codepen, используя библиотеку cdn.
Популярность
React более популярен, чем VueJS. Освоив React, вы будете иметь больше возможностей трудоустройства, чем в случае с VueJS. Причина большей популярности React заключается в имени, стоящем за ним — то есть Facebook. Так как React использует основные понятия JavaScript, он применяет также его наилучшие практики. Разработчик, работающий с React точно будет хорошо разбираться в JavaScript.
VueJS – это развивающийся фреймворк. На данный момент возможность трудоустройства со знанием VueJS ниже, чем с React. Согласно данным опросов, много людей уже постепенно адаптируются к VueJS, то есть в будущем он действительно может стать более широко используемым, чем React и Angular. Над различными функциями VueJS работают члены очень активного сообщества. Это сообщество поддерживает vue-router и регулярно выпускает обновления к нему.
VueJS перенял различные преимущества Angular и React и построил эффективную библиотеку. VueJS намного быстрее по сравнению с React/Angular благодаря его легкой библиотеке.
VueJS и Angular
Схожие черты
VueJS во многом схож с Angular. Такие директивы как v-if, v-for почти идентичны ngIf, ngFor в Angular. Они оба имеют интерфейс командной строки для установки и создания проекта. VueJS использует Vue-cli, а Angular – angular-cli. Оба предлагают двухстороннюю привязку данных, рендеринг на стороне сервера и т.д.
Сложности в работе
Начать работу с Vuejs очень просто. Как было сказано раннее, начинающий разработчик может взять CDN библиотеку в VueJS и начать работать в codepen и jsfiddle.
Что касается Angular, то нам придётся пройти несколько этапов установки; начать работу с Angular новичкам будет немного сложнее. Для написания кода он использует TypeScript, что сложно для людей, которые имеют только опыт работы с JavaScript. А вот пользователям с опытом работы с Java и C# будет однозначно проще.
Производительность
Именно пользователи принимают решения по поводу производительности. Размер файла VueJS гораздо легче, чем размер файла Angular. Со сравнением производительности фреймворков можно ознакомиться по следующей ссылке http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
Популярность
На сегодняшний день Angular более популярен, чем VueJS. Многие организации используют Angular, и возможностей трудоустройства с Angular гораздо больше. Однако, VueJS продолжает занимать стойкую позицию на рынке и может считаться хорошим конкурентом Angular и React.
Зависимости
Angular предоставляет много встроенных функций. Чтобы начать, нам нужно импортировать необходимые модули, например, @angular/animations, @angular/form. VueJS не имеет всех встроенных функций Angular и для работы с ним понадобятся сторонние библиотеки.
Гибкость
VueJS можно спокойно объединять с любым другим большим проектом. В отличие от Angular, который не так просто интегрировать с другим существующим проектом.
Совместимость с предыдущими версиями
Раньше были выпущены AngularJS, Angular2, а теперь мы имеем Angular4. AngularJS и Angular2 очень сильно отличаются друг от друга. Приложение проекта, разработанное в AngularJS не может быть конвертировано в Angular2 из-за базовых отличий.
Крайняя версия VueJS – это 2.0, она совместима с предыдущей версией. Также предоставляется доступная для понимания документация.
Typescript
Angular использует TypeScript для написания кода. Для начала работы с Angular пользователи должны хорошо знать Typescript. Между тем, с VueJS мы можем прописывать код в jsfiddle или codepen, используя библиотеку cdn. Здесь мы можем работать со стандартным JavaScript, что обеспечивает нам неплохой старт.
VueJS и Ember
Схожие черты
Ember предоставляет инструмент командной строки Ember, то есть ember-cli, для простой установки и компиляции проектов Ember. VueJS также имеет инструмент командной строки vue-cli для запуска и создания проектов. Оба они содержат такие функции как роутер, шаблон и компоненты, которые делают их очень эффективными UI фреймворками.
Производительность
По сравнению с Ember, VueJS может похвастаться лучшей производительностью. Ember добавил механизм визуализации мерцания с целью улучшить производительность повторной визуализации, что напоминает virtual DOM, используемый VueJS и React. Однако, VueJS имеет лучшую производительность, чем Ember.
VueJS и Knockout
Knockout имеет хорошую поддержку браузерами. Он поддерживается минимальной версией IE, в то время как VueJS не поддерживается в IE8 и ниже. Поддержка Knockout в последнее время немного сбавила темпы, поэтому с недавних пор он уже не так популярен. VueJS, в свою очередь, набрал популярность благодаря команде Vue, которая регулярно выпускает обновления.
VueJS и Polymer
Библиотека Polymer была разработана в Google. Она используется во многих проектах Google, например, Google I/O, Google Earth, Google Play Music и других. Как и VueJS, она представляет привязку данных и вычисляемые свойства.
Определение пользовательского элемента в Polymer включает в себя простой JavaScript/CSS, свойства элемента, жизненные циклы и методы JavaScript. А VueJS позволяет легко и просто использовать JavaScript/html и CSS.
Polymer использует функции веб-компонентов и для него требуются полифиллы для обеспечения поддержки браузерами этих функций. VueJS не имеет таких зависимостей и прекрасно работает со всеми браузерами от IE9 и выше.