Позвоните нам
8 800 555-23-46
звонок по Роcсии бесплатный
+7 (495) 580 30 45 Москва
+7 (8442) 78 18 90 Волгоград
+ 7 (917) 338 51 54
Все контакты и офисы
Напишите нам: info@onvolga.ru

Спросить онлайн

Почему стоит использовать фреймворк Vue.js

Что такое Vue.js

Vue.js - современный фреймворк для создания фронтенда приложения. Фреймворк реактивен. Это означает, что он связывается с данными и когда данные обновляются, часть компонента, которая от них зависела, перерисовывается.

В общих чертах процесс выглядит следующим образом:

  1. Загружается пустая страница, на которой инициализирован экземпляр vue;
  2. После того как vue на странице загрузился, отправляется запрос к API на получение данных, которые будут нужны для работы представления;
  3. После того как данные пришли, vue отрисовывает их по заданному шаблону;
  4. Если состояние данных меняется, то шаблон перерисовывается.

Компоненты 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 сыграли следующие факторы:

  1. У Vue самый маленький размер среди фреймворков;
  2. Во всех тестах производительности vue либо в топе, либо отстает на незначительный процент;
  3. Vue можно подключать к конкретной странице, никак не влияя на остальные, что позволяет начать его частичное использование на уже реализованном проекте.

Vuex

В Vue есть возможность для всего приложения использовать одно центральное хранилище. Это будет означать, что все компоненты, использующие один экземпляр Vue, могут использовать одни и те же данные. Один компонент может вызвать обновление этих данных, а второй мгновенно отреагирует на их изменение. Если добавить к этому использование пакета для сохранения состояния хранилища в cookies, можно добиться следующего эффекта: состояние приложения (все отмеченные чекбоксы, открытые модальные окна) будет сохранено, и при следующем открытии сайта вернется в состояние перед закрытием (если это, конечно, нужно).

 Ваш запрос или вопрос по теме:

Интернет-агентство сегодня:

ТОП20 веб-студий России по разработке интернет-магазинов по доступной цене в рейтинге CMSMagazine, 1 место в ЮФО и ТОП10 Центрального ФО.

ТОП100 веб-студий Партнеров Битрикса по созданию интернет-магазинов и 11 место среди разработчиков интернет-магазинов на Битриксе по низким ценам в рейтинге РейтингРунета-2016.

ТОП10 разработчиков интернет-магазинов Москвы по доступной цене в рейтинге РейтингРунета.

ТОП120 SEO-компаний России, специализирующихся на поисковом продвижении интернет-магазинов по версии РейтингРунета.

Золотой Сертифицированный Партнер 1С-Битрикс.

Государственная аккредитация в области информационных технологий (№5291 Министерства связи РФ).

ПОЛУЧИТЕ БЕСПЛАТНУЮ КОНСУЛЬТАЦИЮ или ОТПРАВЬТЕ ЗАПРОС

Задайте вопрос о веб-разработке, обслуживании или продвижении сайта или отправьте запрос по работам. Мы стараемся отвечать на Ваши запросы в течение 24 часов.