Почему стоит использовать фреймворк Vue.js
Что такое Vue.js
Vue.js - современный фреймворк для создания фронтенда приложения. Фреймворк реактивен. Это означает, что он связывается с данными и когда данные обновляются, часть компонента, которая от них зависела, перерисовывается.
В общих чертах процесс выглядит следующим образом:
- Загружается пустая страница, на которой инициализирован экземпляр vue;
- После того как vue на странице загрузился, отправляется запрос к API на получение данных, которые будут нужны для работы представления;
- После того как данные пришли, vue отрисовывает их по заданному шаблону;
- Если состояние данных меняется, то шаблон перерисовывается.
Компоненты Vue.js
Компоненты — это переиспользуемые экземпляры Vue со своим именем. Каждый компонент представляет собой законченную единицу, которая может быть использована внутри других компонентов.
В частности, мы можем создать компонент модального окна, объявить его глобально, как, например, vue-modal, и подключать в верстке как обычный html-тег, передавая внутрь определенные заранее заданные свойства вида:
<vue-modal><div slot="button">Открыть</div><div slot="content">Содержимое модального окна</div><vue-modal>
В итоге на месте этого тега выведется кнопка «Открыть», при нажатии на которую откроется модальное окно. В нем будет написано «Содержимое модального окна».
Благодаря этому можно создавать очень сложную логику, вызывая одни модальные окна из других, а из вторых - третьи и т.д., причем код будет оставаться предельно простым и читаемым.
Vue.js и Bootstrap
Для Vue существует много готовых компонентов. Чтобы не писать с нуля различные модальные окна, таблицы с сортировками и поиском, календари и прочее, можно воспользоваться готовыми пакетами Bootstrap + Vue, vuetifyjs или аналогичными.
Однако стоит учитывать, что размер таких пакетов может быть достаточно большим, и если использование всех компонентов не планируется, то стоит подключать их по одному через
import { Modal } from 'bootstrap-vue/es/components',
но не через:
import BootstrapVue from 'bootstrap-vue'
Почему vue.js
При выборе между фреймворками React, Vue и AngularJS, в пользу Vue сыграли следующие факторы:
- У Vue самый маленький размер среди фреймворков;
- Во всех тестах производительности vue либо в топе, либо отстает на незначительный процент;
- Vue можно подключать к конкретной странице, никак не влияя на остальные, что позволяет начать его частичное использование на уже реализованном проекте.
Vuex
В Vue есть возможность для всего приложения использовать одно центральное хранилище. Это будет означать, что все компоненты, использующие один экземпляр Vue, могут использовать одни и те же данные. Один компонент может вызвать обновление этих данных, а второй мгновенно отреагирует на их изменение. Если добавить к этому использование пакета для сохранения состояния хранилища в cookies, можно добиться следующего эффекта: состояние приложения (все отмеченные чекбоксы, открытые модальные окна) будет сохранено, и при следующем открытии сайта вернется в состояние перед закрытием (если это, конечно, нужно).
