Одна из моих любимых особенностей VueJS как фреймворка - это его пассивное применение хороших практик разработки программного обеспечения.
По дизайну он не требует какого-либо стиля или архитектуры кодирования, но он позволяет так легко писать правильно, что вы можете просто сделать это.
Одним из примеров является атрибут scoped, предлагаемый vue-loader.
Написание CSS, который только применяется к одному компоненту, обычно выполняется вручную. Вы можете обернуть свой компонент в класс или использовать соглашение об именах, такое как Atomic Design, BEM или SMACSS. Это не неправильно, но это делается вручную. scoped сделает всю эту тяжелую работу за вас одним ключевым словом.
Компоненты - другой пример. Большинство интерфейсных инженеров (и библиотеки) согласны с тем, что компоненты - это то, как мы должны создавать пользовательский интерфейс. В конце концов, приложение VueJS - это буквально набор компонентов.
Итак, вы, вероятно, спрашиваете: почему бы вам не использовать Vue.component?
Хорошо…
Компоненты, использующие Vue.component, являются глобальными
Это всегда было о глобальных событиях. С незапамятных времен мы ведем борьбу с глобалами.
Глобальный компонент означает следующее: если Компонент A хочет использовать Компонент B, и Компонент B является глобальным, Компонент B можно просто добавить в шаблон Компонента A, и он будет отображен. Нигде больше не указано требование Компонента A к Компоненту B, кроме кода.
Это не оптимально по ряду причин, в том числе:
Глобальные переменные усложняют рефакторинг кода
Сборщики модулей сейчас очень популярны. Это хорошо. Модули упрощают организацию нашего кода в отдельные файлы. Это делает наш код не только более СУХИМ, но и упрощает рефакторинг.
Как? Хорошо…
Все наши зависимости явны. Например, если модуль a должен быть удален, а модуль b зависит от него, module b теперь не работает, и сборщик сообщит вам об этом.
Это важная функция в проектах, над которыми работает более одного человека, поскольку снижает когнитивную нагрузку при работе над одним модулем.
Если для файла требуется глобальная переменная, как узнать, что это такое? Объект? Функция? Класс? Невозможно узнать, если он не прокомментирован, и даже в этом случае он, вероятно, неверен. И даже если в какой-то момент он был правильным, он мог быть перезаписан, потому что Javascript позволяет вам сделать это с глобальными объектами.
Использование Vue.component - то же самое, что и использование глобальной переменной, и связано с теми же проблемами.
<component-name> может быть чем угодно: списком, диалоговым окном, текстовым полем, изображением кота. Используя Vue.component, единственный способ узнать, как <component-name> на самом деле выглядит, - это использовать Find All вашего текстового редактора и выполнить поиск по запросу ComponentName или component-name (см. Мою точку зрения).
Именование коллизий
С Vue.component существует риск того, что запрошенное имя уже занято. Это вызовет ошибку, которую можно устранить, только переименовав компонент.
Теоретически вы должны иметь возможность изменить имя компонента на любое, в зависимости от того, где он находится. Это возможно, если компонент определен как явная зависимость, как это я описываю ниже (раздел «Что использовать вместо»).
Ломает инструмент
Инструменты - важная часть уравнения. Для пользователей Vue, использующих VSCode, Vetur предлагает отличную поддержку .vue компонентов.
Одной из функций Vetur является автозаполнение свойств компонентов, при условии, что компонент зарегистрирован локально, а не глобально. Если компонент глобальный, вы не получите… ничего.
Это важно, потому что это еще один уровень документации для ваших компонентов. Если вы работаете с .NET, вы знаете, насколько удобно получить описание того, что ожидается в вашей среде IDE.
Для компонентов Vue вы можете получить то же самое. Все, что вам нужно сделать, это добавить примечание к определению компонента:
затем он будет распространяться в автозаполнении для этой опоры.
Что использовать вместо Vue.component
Я люблю технические статьи с параграфами проблем и предложениями решения.
Это так просто. Вы можете избежать всех проблем, описанных выше, только используя локальную регистрацию для всех ваших компонентов.
Вместо этого это означает:
// ComponentName.vue
export default Vue.component("ComponentName", {...})
сделай это:
// ComponentName.vue
export default {...}
Поэтому всякий раз, когда вам нужно использовать ComponentName.vue, вы делаете это:
// OtherComponentName.vue
import ComponentName from "./ComponentName.vue"
export default {
components: {
ComponentName
}
}
И теперь буквально все проблемы с глобальными компонентами решены.
