Vue незаметно становится одной из самых популярных сред JavaScript. Каковы основы этого относительно нового входа в огромный мир интерфейсных технологий?

Фреймворки JavaScript владеют индустрией разработки интерфейсов. Прошли те времена, когда компании просили только опыт работы с JavaScript; вместо этого это 2+ года с React или знаком с Angular. Поскольку фреймворки упрощают функциональное добавление, абстрагируя беспорядочный код манипулирования DOM, внедрение, вероятно, будет продолжать расти. В то время как React и Angular на данный момент владеют насестом, Vue продвигается вверх по рейтингу использования, заняв третье место в недавнем опросе StackOverflow. Позиционируя себя как прогрессивнуюинфраструктуру, Vue легко добавить в существующий проект. Проекты Vue состоят из изолированных фрагментов кода, называемых компонентами. Компоненты состоят из представления и модели данных — они работают в тандеме для создания пользовательского интерфейса конечного пользователя.

Что такое Vue.js?

Vue, разработанный бывшим инженером Google Эваном Ю, представляет собой прогрессивный фреймворк JavaScript. В контексте «прогрессивный» означает, что Vue универсален; его можно добавить в существующий проект или реализовать как фреймворк, управляющий всем интерфейсом. Независимо от интеграции, основы Vue остаются прежними.

Как и большинство интерфейсных фреймворков, Vue лишает разработчика JavaScript контроля над DOM (объектной моделью документа). Традиционно всякий раз, когда разработчик пишет код, обновляющий представление страницы, он должен пройти через DOM. Шаги в основном такие же — выберите элемент, который нужно обновить, измените элемент, затем либо добавьте/удалите (в зависимости от изменения) обратно в DOM. Запросы элементов могут стать беспорядочными, и Vue абстрагирует все функции и методы селектора элементов. Это делает Vue (и подобные ему фреймворки) декларативными, в отличие от традиционных JavaScripts, которые являются императивными.

Компоненты Vue используют модель данных для управления изменениями представления. Всякий раз, когда пользователь взаимодействует с представлением — например, нажатием кнопки — Vue обновляет модель данных, связанную с этим компонентом. Отношения проявляются в обоих направлениях — любые изменения в модели вызывают повторную визуализацию представления. Vue называет это реактивностью — модель данных и представление оба реагируют на изменения друг друга и соответствующим образом обновляются.

Vue в действии

Выше показан простой счетчик, реализованный с помощью Vue. В этом примере представлена ​​пара фундаментальных функций Vue, начиная с объекта «данные».

Объект данных: источник силы Vue

Каждый компонент Vue принимает объект options, содержащий логику компонента. Данные — один из самых важных параметров. Данные, реализованные как функция, возвращают объект с начальным состоянием компонента. Как обсуждалось ранее, этот объект данных (модель) привязан к представлению — все поля в объекте данных доступны для шаблона (HTML).

В строке 10 синтаксис двойной скобки понимается Vue как «вставьте сюда значение ключа объекта данных count». Но как Vue узнает, какие разделы HTML он контролирует? С чего начинается «вид»? Ответ кроется в теге script.

После того, как компонент создан с помощью «Vue.createApp», Vue необходимо знать, куда его «монтировать». Как правило, это делается путем передачи Vue идентификатора элемента HTML. В этом элементе Vue возьмет на себя управление — любые дочерние элементы, вложенные в элемент mount, находятся под управлением Vue. Предоставление Vue этого уровня контроля позволяет разработчику использовать синтаксис шаблона Vue в HTML, например, двойную скобку «count», показанную ранее.

Здесь стоит отметить строку 15. Тег script отвечает за то, чтобы объект «Vue» был доступен глобально; без него функция createApp была бы недоступна.

Директивы Vue

Директивы — это шаблонный синтаксис для включения HTML, названный так потому, что они предписывают HTML вести себя определенным образом. В примере со счетчиком используется @click. @click — это сокращение от директивы v-on. Эта конкретная директива прикрепляет слушатель к событию — в приведенном выше примере мы прослушиваем событие щелчок, а затем выполняем функцию, когда событие услышано.

Как это выглядит с ванильным JavaScript?

Обратите внимание, что в скрипте Vue нет прямой манипуляции с DOM — нет инструкции «document.getElement», нет «document.addEventListener» — ничего, что заставило бы читателя подумать, что DOM обновляется. Vue обрабатывает манипуляции с DOM для разработчика. Для сравнения, вот то же приложение-счетчик, но написанное на ванильном JavaScript.

Дальше с Vue

Понимание Vue начинается с твердого понимания основ. Я считаю, что очень важно понимать преимущества Vue по сравнению с традиционным JavaScript. Преимущества, обсуждаемые в этой статье, включают реактивность, абстракцию манипулирования DOM и управление состоянием компонентов. Имейте в виду, что пример не изображает Vue в том виде, в каком он используется в профессиональных условиях. В настоящее время разработка компонентов Vue выполняется в файлах .vue, а не в файлах JavaScript. Эти автономные файлы .vue сами по себе достойны темы блога, требующей использования сборщика (например, Webpack). В следующем посте мы подробно обсудим однофайловые компоненты, сосредоточившись на структуре и представив мощные функции Vue, такие как события жизненного цикла.