VueJS — это прогрессивный JavaScript-фреймворк с открытым исходным кодом, используемый для разработки интерактивных веб-интерфейсов. Это одна из известных платформ, используемая для упрощения веб-разработки. VueJS фокусируется на слое представления. Он может быть легко интегрирован в большие проекты для фронт-энда разработки без каких-либо проблем.
Начать установку VueJS очень легко. Любой разработчик может легко понять и создать интерактивные веб-интерфейсы в считанные сроки. VueJS создан Эван Ю, бывшим сотрудником Google. Первая версия VueJS была выпущена в феврале 2014 года. Недавно она достигла 64 828 звезд на GitHub, что сделало ее очень популярной.
Характеристики
Ниже приведены функции, доступные в VueJS.
Виртуальный ДОМ
VueJS использует виртуальный DOM, который также используется в других средах, таких как React, Ember и т. Д. Изменения не вносятся в DOM, вместо этого создается реплика DOM, которая представлена в виде структур данных JavaScript , Всякий раз, когда необходимо внести какие-либо изменения, они вносятся в структуры данных JavaScript, и последние сравниваются с исходной структурой данных. Окончательные изменения затем обновляются до реального DOM, который пользователь увидит изменяющимся. Это хорошо с точки зрения оптимизации, это дешевле и изменения могут быть внесены более быстрыми темпами.
Привязка данных
Функция привязки данных помогает манипулировать или присваивать значения атрибутам HTML, изменять стиль, назначать классы с помощью директивы привязки v-bind, доступной в VueJS.
Компоненты
Компоненты являются одной из важных функций VueJS, которая помогает создавать пользовательские элементы, которые можно повторно использовать в HTML.
Обработка событий
v-on — это атрибут, добавляемый к элементам DOM для прослушивания событий в VueJS.
Анимация / Transition
VueJS предоставляет различные способы применить переход к элементам HTML, когда они добавляются / обновляются или удаляются из DOM. VueJS имеет встроенный компонент перехода, который необходимо обернуть вокруг элемента для эффекта перехода. Мы можем легко добавить сторонние библиотеки анимации, а также добавить больше интерактивности в интерфейс.
Вычисленные свойства
Это одна из важных особенностей VueJS. Это помогает прослушивать изменения, внесенные в элементы пользовательского интерфейса, и выполняет необходимые вычисления. Для этого нет необходимости в дополнительном кодировании.
Шаблоны
VueJS предоставляет шаблоны на основе HTML, которые связывают DOM с данными экземпляра Vue. Vue компилирует шаблоны в виртуальные функции DOM Render. Мы можем использовать шаблон функций рендеринга, и для этого мы должны заменить шаблон функцией рендеринга.
Директивы
VueJS имеет встроенные директивы, такие как v-if, v-else, v-show, v-on, v-bind и v-model, которые используются для выполнения различных действий во внешнем интерфейсе.
Зрителей
Наблюдатели применяются к данным, которые изменяются. Например, формировать элементы ввода. Здесь нам не нужно добавлять какие-либо дополнительные события. Watcher заботится о любых изменениях данных, делая код простым и быстрым.
маршрутизация
Навигация между страницами осуществляется с помощью vue-router.
облегченный
Скрипт VueJS очень легкий и производительность также очень быстрая.
Вью-CLI
VueJS может быть установлен из командной строки с помощью интерфейса командной строки vue-cli. Это помогает легко создавать и компилировать проект, используя vue-cli.
Сравнение с другими структурами
Теперь давайте сравним VueJS с другими фреймворками, такими как React, Angular, Ember, Knockout и Polymer.
VueJS v / s React
Виртуальный ДОМ
Виртуальный DOM — это виртуальное представление дерева DOM. С виртуальным DOM создается объект JavaScript, который совпадает с реальным DOM. Каждый раз, когда необходимо внести изменения в DOM, создается новый объект JavaScript и вносятся изменения. Позже оба объекта JavaScript сравниваются, а окончательные изменения обновляются в реальном DOM.
VueJS и React используют виртуальный DOM, что делает его быстрее.
Шаблон v / s JSX
VueJS использует HTML, JS и CSS отдельно. Новичку очень легко понять и принять стиль VueJS. Подход на основе шаблонов для VueJS очень прост.
Реакт использует JSX подход. Все это JavaScript для ReactJS. HTML и CSS являются частью JavaScript.
Инструменты для установки
React использует приложение create response, а VueJS использует vue-cli / CDN / npm . Оба очень просты в использовании, и проект настроен со всеми основными требованиями. Для сборки React требуется веб-пакет, а для VueJS — нет. Мы можем начать с кодирования VueJS в любом месте jsfiddle или codepen, используя библиотеку cdn.
популярность
Реакт популярен чем VueJS. Возможность работы с React больше, чем у VueJS. За React стоит громкое имя, то есть Facebook, что делает его более популярным. Поскольку React использует основную концепцию JavaScript, он использует лучшие практики JavaScript. Тот, кто работает с React, безусловно, будет очень хорош со всеми концепциями JavaScript.
VueJS — это развивающийся фреймворк. В настоящее время возможности трудоустройства в VueJS меньше по сравнению с React. Согласно опросу, многие люди адаптируются к VueJS, что может сделать его более популярным по сравнению с React и Angular. Есть хорошее сообщество, работающее над различными функциями VueJS. Это сообщество поддерживает регулярные обновления vue-router.
VueJS позаимствовал у Angular и React хорошие детали и создал мощную библиотеку. VueJS намного быстрее по сравнению с React / Angular из-за своей легкой библиотеки.
VueJS v / s Angular
сходства
VueJS имеет много общего с Angular. Такие директивы, как v-if, v-for, почти аналогичны ngIf, ngFor of Angular. Они оба имеют интерфейс командной строки для установки проекта и его сборки. VueJS использует Vue-cli, а Angular использует angular-cli. Оба предлагают двустороннее связывание данных, рендеринг на стороне сервера и т. Д.
сложность
Vuejs очень легко учиться и начать с. Как уже говорилось ранее, новичок может взять библиотеку CDN VueJS и начать работать с codepen и jsfiddle.
Для Angular нам нужно пройти серию шагов по установке, и начинающим не сложно начать работу с Angular. Он использует TypeScript для кодирования, что сложно для людей, пришедших из основного фона JavaScript. Тем не менее, его легче освоить пользователям, принадлежащим Java и C # background.
Спектакль
Чтобы решить производительность, это зависит от пользователей. Размер файла 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, и это хорошо с обратной совместимостью. Это обеспечивает хорошую документацию, которая очень проста для понимания.
Машинопись
Angular использует TypeScript для своего кодирования. Пользователи должны иметь знание Typescript, чтобы начать работу с Angular. Однако мы можем начать с кодирования VueJS в любом месте jsfiddle или codepen, используя библиотеку cdn. Мы можем работать со стандартным JavaScript, который очень легко начать.
VueJS v / s Ember
сходства
Ember предоставляет инструмент командной строки Ember, то есть ember-cli для простой установки и компиляции для проектов Ember.
VueJS также имеет инструмент командной строки vue-cli для запуска и сборки проектов.
Они оба имеют такие функции, как маршрутизатор, шаблон и компоненты, что делает их очень богатыми в качестве инфраструктуры пользовательского интерфейса.
Спектакль
VueJS имеет лучшую производительность по сравнению с Ember. Ember добавил механизм рендеринга мерцания с целью повышения производительности рендеринга, который похож на VueJS и React с использованием виртуального DOM. Тем не менее, VueJS имеет лучшую производительность по сравнению с Ember.
VueJS v / s Knockout
Knockout обеспечивает хорошую поддержку браузера. Он поддерживается в более низкой версии IE, тогда как VueJS не поддерживается в IE8 и ниже. Развитие нокаута со временем замедлилось. В последнее время популярность не такова.
С другой стороны, VueJS начал набирать популярность благодаря команде Vue, предоставляющей регулярные обновления.
VueJS v / s Полимер
Полимерная библиотека была разработана Google. Он используется во многих проектах Google, таких как Google I / O, Google Earth, Google Play Music и т. Д. Он предлагает привязку данных и вычисляемые свойства, аналогичные VueJS.
Определение пользовательского элемента Polymer включает простой JavaScript / CSS, свойства элемента, обратные вызовы жизненного цикла и методы JavaScript. Для сравнения, VueJS позволяет легко использовать JavaScript / html и CSS.
Polymer использует функции веб-компонентов и требует полифилов для браузеров, которые не поддерживают эти функции. VueJS не имеет таких зависимостей и прекрасно работает во всех браузерах IE9 +.