Дата последнего изменения: 08.02.2021
Vue.JS базируется на идее
виртуального DOM.
DOM (аббревиатура от Document Object Model) — способ представления
структурного документа с помощью объектов. Это кроссплатформенное и
языко-независимое соглашение для представления и взаимодействия с
данными в HTML, XML и т.д.
Главная проблема DOM — он никогда не был рассчитан для создания динамического
пользовательского интерфейса (UI). Мы можем работать с ним, используя
JavaScript и библиотеки наподобие jQuery, но их использование не решает
проблем с производительностью.
Вместо того, чтобы взаимодействовать с DOM напрямую, мы работаем с его
легковесной копией. Мы можем вносить изменения в копию, исходя из
наших потребностей, а после этого применять изменения к реальному DOM.
Подробнее...
Это исключает прямое взаимодействие с узлами интерфейса. Первоначальная работа ведется с виртуальной копией (virtual DOM), а уже потом изменения применяются к реальным узлам интерфейса. Параллельно сравнивается реальное дерево DOM и его виртуальная копия, выявляется разница и переписывается только то, что претерпело изменения. Т.е. за короткий промежуток времени накапливаются все изменения, а потом эти изменения применяются к реальным узлам интерфейса (нодам) единым патчем. За счет этого скорость выполнения гораздо выше.
Vue.js удобно использовать, когда какие-либо данные используются в нескольких компонентах. В таком случае эти данные выносятся в отдельную библиотеку.
Преимущества Vue:
Vue.js реализует все современные подходы к разработке пользовательских интерфейсов и является легким в освоении, гибким и высоко интегрируемым со сторонними технологиями фреймворком.
Библиотека Vue входит в состав продукта «1С-Битрикс: Управление сайтом», что дает возможность использования и кастомизации компонентов Vue, встроенных в ядро BitrixFramework. К тому же, решена проблема версионности библиотеки Vue - в рамках текущего окружения BitrixFramework всегда единая версия.
В этой главе вы узнаете, как лучше всего (и проще) интегрировать Vue в BitrixFramework (CoreJS, локализации, события, наследование).
Подробнее с фреймворком (в том числе и с примерами его использования) вы можете ознакомиться
на официальном сайте.
Если вы хотите узнать больше о Vue перед тем как начать, мы создали видео с рассказом об основных принципах работы на примере проекта.
Если вы — опытный фронтенд-разработчик, и хотите узнать, чем Vue отличается от остальных библиотек или фреймворков, обратите внимание на сравнение с другими фреймворками.
Подробнее...
Преимущества и особенности использования обёртки Vue от Битрикса в следующем:
Первое: если два разработчика - например два приложения из маркетплейса будут использовать Vue разных версий, то будут конфликты и ошибки в работе. В первую очередь BX.Vue сделан для того чтобы этого избежать.
Второй момент - это возможность кастомизировать компоненты в наших модулях через BX.Vue.mutateComponent
. Сейчас такая возможность есть в трех частях системы: Виджет онлайн чата (открытые линии), Новые crm-формы (crm) и Центр продаж (salescenter).
Третье. В рамках Bitrix Framework не используется Webpack так как он не ложится на нашу модульную архитектуру. Мы используем свой транспилятор Bitrix CLI основанный на rollup
И последнее: библиотека Vue которая поставляется в рамках Bitrix Framework - не публикуется в глобальную область видимости. Тем самым она не может создать проблем сторонним приложениям. И они могут спокойно использовать обычное подключение Vue, в том числе использовать его в Webpack не беспокоясь о конфликтах с библиотекой внутри Bitrix Framework.