Что такое Vue.js?
Vue (произносится /vjuː/, примерно как view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его совместно с современными инструментами и дополнительными библиотеками.
Зачем мне он, если есть jQuery?
Даже по краткому описанию можно понять, что Vue JS невероятно схож с jQuery в плане их предназначения. Соответсвенно, возникает вполне резонный вопрос: а зачем нам Vue, когда есть куда более простой для понимания jQuery?
Суть ответа кроется в масштабируемости проектов. Поддержка огромного проекта, что написан лишь на jQuery – это очень сложная задача. jQuery отличная библиотека, что вмещает в себе множество крутых функций для быстрого взаимодействия с пользователем. В то же время, читать большой объем jQuery кода – очень сложно. Дело в том, что в jQuery нет четкой логики разбития проекта на отдельные компоненты. Из-за этого код обычно прописывается в одном единственном файле. Читать и дополнять такой код становиться в какой-то момент невозможно.
По этой причине крупные компании используют Vue JS или React JS для разработки пользовательского функционала на сайте. Сперва Vue покажется вам гораздо сложнее, нежели jQuery, но не стоит его пугаться. Vue – приятный фреймворк, который вы вскоре полюбите и будете всегда использовать для ваших проектов.
Преимущества и недостатки VueJS
Преимущества
Реактивность
Привязывание данных — это отличная вещь в мире интерфейсов. Вместо микроменеджмента DOM, как мы это делали с jQuery, теперь мы фокусируемся на данных. Vue обрабатывает их аккуратно с помощью двухсторонней реактивной системы привязки данных.
Чтобы достичь этой реактивности, Vue добавляет несколько геттеров и сеттеров к каждой переменной в состоянии, чтобы она могла отслеживать изменения и автоматически обновлять DOM (кхе-кхе, this.setState()). Этот подход не является совершенным, как мы увидим позже.
Батареи прилагаются
С Vue нам нет необходимости прибегать к неофициальным пакетам, таким как MobX или React Router, для критических частей приложения. Vue предоставляет Vue Router и Vuex, Redux-подобный реактивный инструмент для управления состояниями. Это отличные библиотеки сами по себе, но тот факт, что они были специально разработаны для Vue, делает их еще лучше.
Скорость
Vue очень быстр. Возможно, он не самый быстрый, но его производительности с запасом хватает для подавляющего большинства веб-проектов. Когда вам в последний раз нужен был рендеринг и обновление тысяч элементов DOM в секунду?
HTML-шаблоны
Это одна из тем, вызывающих разногласия среди разработчиков JavaScript. Независимо от ваших предпочтений, HTML-шаблоны были проверены в течении десятилетий использования во многих языках и являются основным выбором для написания динамической разметки во Vue.
Но эй, Vue поддерживает также и JSX.
Другие приятные вещи:
· Отдельные файловые компоненты с HTML, CSS и JavaScript.
· Легкий. Около 20 КБ (минимизированный + gzip).
· Хорошо расширяемый (миксины, плагины и т. д.).
· Отличная документация (за некоторыми исключениями, указанными ниже).
· Может быть принят постепенно, даже используется как замена jQuery.
· Просто начать использовать.
Недостатки
Нечеткие архитектурные шаблоны
Вот пример: что лучше — обрабатывать запросы API в компонентах или во Vuex? В документации приведены примеры того, как обрабатывать API-логику во Vuex.
Означает ли это, что логика аутентификации также входит во Vuex? Будет ли менеджер состояний начинать перехватывать всю логику приложения?
Это не очевидные вещи. Большинство людей просто начнут вставлять логику без состояний в действия Vuex или, что еще хуже, непосредственно в компоненты.
Отвечая на первоначальный вопрос: логика API не должна писаться ни во Vuex, ни в компонентах. Существует даже хороший пример того, как это делается в официальных примерах кода.
Итог
Все больше людей переходят на Vue, и я сомневаюсь, что эта тенденция скоро прекратится. Он все еще далеко не настолько принят, как React (по крайней мере, за пределами Китая), и постоянно борется за второе место с Angular.
Но вы можете изучить и что-то другое — React или Angular. Все три инструмента подходят для создания проектов любой сложности. Каждый из них находится в активной разработке и поддерживается профессиональным сообществом. Каждый имеет свои плюсы и минусы — поэтому вам решать, что выбирать и на чём писать приложения.
В будущем мы вам расскажем про React и Anagular, чтобы вы лучше понимали их разницу, в чем их популярность. И по итогу решили, что вы хотите использовать на вашем сайте.