Почему именно Vue?
Библиотека Vue.js с каждым днем набирает все больше и больше популярность, хотя не все понимают почему именно Vue, и в каких именно случаях последнюю можно и нужно использовать.
Технически, Vue.js определена как ViewModel слой шаблона MVVM. Она соединяет модель и представление в двустороннее связывание данных. Текущие DOM-изменения и форматированный вывод абстрагируются в Директивах и Фильтрах.
Цель предоставить преимущества быстрых связываний данных и сложных представлений компонентов с API как простые, так и понятные. Библиотека не является полномасштабным фреймворком, она является всего лишь уровнем представления. Вы можете использовать ее как отдельно, для быстрого прототипирования приложений, или смешивать и сочетать с другими библиотеками для кастомизации пользовательского интерфейса.
На Vue.js значительно повлияли Angular, Knockout, React и Rivets. Несмотря на сходства, Vue.js может предложить ценную альтернативу этим существующим библиотекам, в поисках золотого сечения между простотой и функциональностью.
В чем разница между Vue.js и Angular.js?
Есть несколько причин использовать Vue.js вместо Angular, хотя не все они могут применяться ко всем проектам:
- Vue.js более гибкий, менее прямолинеен в решение. Это позволяет структурировать ваше приложение как вы хотите, а не вынуждает делать все это как в Angular. Vue является только слоем представления, поэтому вы можете использовать его как ненавязчивую особенность на странице приложения, вместо полномасштабного фреймворка. Это дает вам больше возможностей для сочетания Vue с другими библиотеками, но вы также несете ответственность за более архитектурные решения. Так, например, ядро Vue.js не включает маршрутизацию или ajax-функции из коробки, и, как правило, предполагает, что вы строите приложение, используя внешний модуль. Это, вероятно, наиболее важное различие.
- Vue.js гораздо проще, чем Angular, как с точки зрения API, так с точки зрения дизайна. Вы можете изучить практически все аспекты Vue.js достаточно быстро, и сразу начать писать.
- Vue.js имеет более высокую производительность, потому что не использует "dirty checking". Angular становится более медленным, когда используются множество наблюдателей, потому что каждый раз при изменениях в области видимости, всем этим наблюдателям необходимо вычисляться снова. Vue.js не страдает от этого, потому что использует прозрачную систему отслеживания наблюдателей, поэтому все изменения вызываются самостоятельно, при наличии явных связанных зависимости.
В чем разница между Vue.js и React.js?
- React и Vue.js имеют небольшое сходство в том, что оба поддерживают реактивные и компонуемые представления компонентов. Тем не менее внутренняя реализация в корне отличается. React основан на виртуальном DOM — в памяти представлено то, как DOM выглядит на самом деле. Данные в React в значительной степени являются неизменными, и DOM-изменения рассчитываются на основе определения различий. В Vue.js, напротив, данные изменяемы по умолчанию, и изменяются через события. Вместо виртуального DOM, Vue.js работает напрямую с DOM в качестве шаблона, сохраняя ссылки на существующие узлы для связывания.
- Подход с виртуальным DOM обеспечивает функциональный способ описать ваше представление в любой момент, это очень приятно. Потому что не используется шаблон наблюдателей и не перерисовывается все приложение при каждом обновление, представление по определению гарантирует быть синхронизируемым с данными, что также открывает возможности для изоморфных JavaScript-приложений.
- Но проблема при использовании React в том, что ваша логика и представление тесно переплетаются. Для некоторых разработчиков это плюс, но для дизайнеров/разработчиков гибридов, представлять шаблон наглядно гораздо проще в дизайне и CSS. JSX сливаясь с Javascript-логикой ломает ту визуальную модель, которая необходима для отображения кода в дизайне. Vue.js, в отличие, расплачивается своими легковесный директивами, но у вас всегда есть визуально представленный шаблон и инкапсулированная логика в директивах и фильтрах.
- Еще одна проблема React заключается к том, что все обновления делегированы на виртуальный DOM, это немного сложно, когда вам на самом деле требуется контролировать DOM самостоятельно(хотя теоретически можно, следует по сути работать в противовес библиотеке, когда это необходимо). Для приложений, которым нужна сложно-синхронизированная анимация по времени это может стать очень раздражающим ограничением. На этом фронте Vue.js является более гибким.
В чем разница между Vue.js и Polymer?
Polymer — это еще один проект, спонсируемый Google, который также вдохновил Vue.js. Компоненты Vue могут быть более слабосвязанными, чем кастомизированные элементы Polymer'а, но оба обеспечивают похожий стиль разработки. Самым большим отличием является то, что Polymer построен на новейших особенностях web-компонентов, а также требует нетривиальных полифилов для работы(чем снижает производительность) в браузерах, которые не поддерживают эти новейшие особенности. Vue.js, в отличие, работает без каких-либо зависимостей, вплоть до IE9.
В чем разница между Vue.js и KnockoutJS?
Во-первых, Vue обеспечивает более чистый синтаксис геттеров и сеттеров у VM свойств.
На более высоком уровне, Vue отличается от Knockout тем, что в Vue данные являются простыми, менее логически содержащими объектами(такие, что вы можете прямо использовать JSON.stringify и пробросить их после запроса), а ViewModel просто предоставляет интерфейс доступ к этим данным. Vue VM экземпляр всегда связывает исходные данные с соответствующим DOM-элементом. В Knockout, ViewModel по сути является данными, и грань между моделью и слоем ViewModel получается довольно размытой. Отсутствие разделения на части в Knockout вероятно приведет к запутанным ViewModel.
Само по себе — использование библиотеки Vue.js не сводится к панацеи. Библиотека имеет также свои узкие места и не тривиальные решения, но однозначно Vue заслуживает внимания при разработке интерактивных пользовательских интерфейсов.
На просторах интернета довольно много англоязычных обучающих материалов по данной библиотеки, но также существует и русскоязычные уроки для освоения «честного MVVM»: ausite.ru
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
