Особенности компонентов Vue JS

0

Intro

Если вы работали JavaScript разработчиком в течение последних нескольких лет, скорее всего вы работали с каким то MVC/MVVM фреймворком, таким как Angular, Ember, React, Vue и многие другие. За последние пару лет произошел явный переход от «всего в одной коробке» (Angular или Ember), к более шустрым, модульным структурам, таким как React, и в последнее время Vue.

Недавно мы оценивали Vue в Morningstar и выяснили, что он отлично подходит для наших потребностей в разработке компонентов. Вот несколько вещей, которые нам нравятся в компонентах Vue.

1

Хуки жизненного цикла Vue

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

  • beforeCreate — вызывается после того, как экземпляр был инициализирован, но до того, как были установлены настройки наблюдателей / событий
  • created — вызванный после того, как экземпляр был инициализирован, вычисленные свойства, наблюдатели данных и события были установлены, но компонент не был монтирован на DOM элемент el
  • beforeMount — вызывается прямо перед началом процесса монтирования
  • mounted — после того, как экземпляр был установлен, а el в DOM заменен вашим компонентом
  • beforeUpdate — вызывается после изменения данных, но до обновления виртуального DOM
  • updated — вызывается после обновления DOM
  • beforeDestroy — вызывается перед тем, как экземпляр вот-вот будет уничтожен, но полная функциональность экземпляра все еще доступна
  • destroy — вызывается после уничтожения экземпляра
2

Управление компонентом

Vue реализует data down и events up архитектуру. Данные передаются в одну сторону (вниз к дочернему компоненту) через props, а комуникация вверх осуществляется через события.

Наличие одностороннего потока данных предотвратит случайное появление мутаций внутри дочерних компонентов, поскольку данные никогда не будут отправлены обратно родителям, а при следующем обновлении от родителя данные в дочернем компоненте будут снова перезаписаны родительскими данными.

Взаимодействие компонентов в Vue JS

Vue также предоставляет некоторые ограничения, когда дело доходит до данных. Компонентам необходимо будет конкретно объявить, какие props он принимает, и будет игнорировать любые другие. Props также могут быть объявлены как обязательные или необязательные для большей гибкости. Наконец, могут быть объявлены типы prop для проверки. Vue выполняет всю проверку типов перед созданием экземпляра и выведет информацию о недопустимых типах props.

Тот же принцип может применяться в отношении приложения. Подобно React, компоненты Vue могут извлекать данные из одного источника, хранилища данных. Вместо того, чтобы иметь родительский контейнер, передающий данные и принимающий события, хранилище данных может выполнять ту же функцию. Это решение может быть реализовано с нуля или вы можете использовать рекомендованную библиотеку Vuex.

3

Кастомизация через абстракцию слотов

Часто клиентам требуются небольшие настройки или дополнительные функции, которые применимы только к их варианту использования. Это может потенциально привести к ненужной сложности библиотеке компонентов или привести к нескольким вариациям одного и того же компонента, который является кошмаром для обеспечения работоспособности. Vue имеет приятное решение для использования слотов. Как и название, слоты действуют как заполнители для различного возможного контента внутри вашего компоновки компонентов.

Давайте посмотрим на реальный пример, чтобы лучше понть, как работают слоты. Скажем, у нас есть компонент popover, который позволяет использовать различные типы компоновки в зависимости от контекста. Вместо того, чтобы создавать другой компонент popover для каждого макета, мы можем абстрагировать его немного и использовать слоты для учета всех различий.

Затем в зависимости от родительского компонента, в котором будет использоваться popover, вы можете использовать разные реализации popover.

Слоты могут быть универсальными и не нуждаться в имени, но для более сложных макетов, рекомендуется использовать имена.

4

Повторное использование с помощю примесей

По мере того, как вы создаете свою библиотеку компонентов, скорее всего, вы начнете замечать повторяющиеся функции среди ваших различных компонентов. Vue способствует повторному использованию, позволяя вам извлечь эту функциональность в mixin, которые можно смешивать с несколькими компонентами.

Примеси — это простые объекты, которые содержат любой компонент. Вы можете определить функции, методы, свойства и т. д., И будьте уверены, что они будут правильно объединены с вашими конкретными параметрами. Если ваш mixin предоставляет значение конфликтующего объекта с собственным значением компонента, значение компонента будет иметь приоритет во время слияния. Однако, если ваш mixin обеспечивает хук для одного события жизненного цикла, оба хука будут выполнены, но сначала будет вызываться mixin.

Mixins можно даже установить на глобальном уровне и применить ко всем компонентам Vue на странице. Подобно загрязнению глобальной области в JavaScript, эти глобальные миксины будут влиять на любые компоненты Vue (включая сторонние) Vue на странице. Используйте на свой риск.

Похожие публикации

Комментарии