Руководство по созданию лучших компонентов Vue
1. Компоненты можно загружать глобально или локально
Vue.js предоставляет два способа загрузки компонентов: один глобально в экземпляре Vue, а другой - на уровне компонентов. Оба метода имеют свои преимущества.
Глобальная загрузка компонента делает его доступным из любого шаблона в вашем приложении, включая подкомпоненты. Это ограничивает количество раз, когда вам нужно импортировать глобальный компонент в подкомпоненты. Кроме того, если вы загружаете компоненты глобально, вы не получите ошибку компонента регистра Vue “did you register the component correctly?”. Осторожно, экономно загружайте глобальные компоненты. Это раздувает ваше приложение, и даже если оно не используется, оно все равно будет включено в ваши сборки Webpack.
Локальная загрузка компонентов дает вам возможность изолировать компоненты и загружать их только при необходимости. В сочетании с Webpack вы можете отложить загрузку компонентов только тогда, когда они используются. Это значительно уменьшает размер исходного файла приложения и сокращает время начальной загрузки.
2. Отложенная загрузка / асинхронные компоненты
Ленивая загрузка компонентов с использованием динамического импорта Webpack. Vue поддерживает отложенную загрузку ваших компонентов во время рендеринга и разделение кода. Эти оптимизации позволяют загружать код вашего компонента только тогда, когда это необходимо, уменьшая ваш HTTP-запрос, размер файла и автоматически повышая производительность. Самое замечательное в этой функции то, что она работает как с глобально загруженными, так и с локально загруженными компонентами.
Глобальная загрузка асинхронных компонентов:
Локальная загрузка асинхронных компонентов:
« COOK увеличил конверсию на 7%, снизил показатель отказов на 7% и увеличил количество страниц за сеанс на 10% , когда они уменьшили среднее время загрузки страницы на 850 миллисекунд».
3. Необходимые реквизиты
Есть несколько способов создать реквизиты для компонента; вы можете передать массив строк, представляющих имена опор, или вы можете передать объект с ключами в качестве имен опор и объекта конфигурации.
Использование объектно-ориентированного подхода позволяет вам создавать несколько ключевых изменений конфигурации для отдельных свойств, одно из которых является обязательным ключом. Требуемый ключ ожидает значение true или false. True выдаст ошибку, если свойство не установлено при использовании компонента, а значение false (значение по умолчанию) не потребует или не выдаст ошибку, если свойство не установлено. Хорошая практика - использовать необходимую опору для других разработчиков при совместном использовании компонентов, а также для себя, чтобы напомнить вам, что опора критически важна для компонента.
4. Запускайте пользовательские события с помощью $emit
Связь между дочерним и родительским компонентами может осуществляться с помощью встроенной функции компонента $emit для генерации настраиваемых событий. Функция $emit принимает строку для имени события и необязательное значение, которое должно быть отправлено. Чтобы прослушивать событие, просто добавьте «@eventName» к компоненту, излучающему событие, и передайте свой обработчик событий. Это отличный способ сохранить единый источник истины и обеспечить поток данных от дочернего компонента к родительскому.
5. Разделение компонентов на логические части
Легче сказать, чем сделать, но как определить логический фрагмент, на который нужно разбить компонент? Первый способ разбить ваш компонент основан на скорости изменения данных. Если данные постоянно меняются в одном разделе компонента, но не в других, вероятно, это должен быть отдельный компонент.
Причина в том, что если ваши данные / HTML постоянно меняются в одном разделе вашего шаблона, все это необходимо проверять и обновлять. Однако, если тот же самый HTML помещается в отдельный компонент с данными, передаваемыми с использованием свойств, тогда только этот компонент будет обновлен при изменении его свойств.
Еще один способ логически разбить компоненты - возможность повторного использования. Если у вас есть HTML, графика или функциональные возможности, которые последовательно используются во всем приложении, такие как кнопка, флажок, анимация логотипа, призыв к действию или изображение, содержащее простой текст изменений, - это было бы хорошей изоляцией кандидата в новый компонент, который может можно использовать повторно. У многократно используемых компонентов есть скрытое преимущество, заключающееся в упрощении обслуживания, поскольку вы меняете один компонент, вместо того, чтобы искать замену и изменять несколько областей в базе кода.
6. Подтвердите свой реквизит
Вместо использования массива строк для определения ваших реквизитов используйте объектную нотацию, которая позволяет настраивать каждую опору. Два очень полезных стиля конфигурации - это «тип» и «валидатор».
Используя параметр типа, Vue автоматически проверит тип вашего значения prop. Например, если мы ожидаем опору Number, но получили String, вы получите предупреждение в консоли, подобное этому:
[Vue warn]: Invalid prop: type check failed for prop “count”. Expected Number
Для более сложных проверок мы можем передать функцию свойству валидатора, которое принимает значение в качестве аргумента и возвращает либо true, либо false. Это очень мощно, потому что позволяет нам писать настраиваемую проверку для значения, которое передается этому конкретному свойству.
7. Привязка и перезапись нескольких реквизитов
Если у вашего компонента есть несколько реквизитов, скажем, 5, 6, 7 или больше, может стать утомительным постоянная установка привязок для каждой опоры. К счастью, есть быстрый способ установить привязку для всех свойств компонента - привязать объект вместо одного свойства с помощью v-bind.
Дополнительным преимуществом использования привязки объекта является возможность перезаписать любую привязку объекта. В нашем случае, если у нас isActive установлено значение false в нашем объекте person, мы можем сделать еще одну привязку к фактическому компоненту person и установить isActive в значение true, не перезаписывая оригинал.
8. Изменение свойств в компонентах
В некоторых случаях вы можете захотеть изменить значение, переданное из опоры. Тем не менее, это даст вам предупреждение: «Избегайте прямого изменения опоры» и с уважением. Вместо этого используйте значение prop в качестве значения по умолчанию для свойства локальных данных. Это даст вам возможность увидеть исходное значение, но изменение локальных данных не изменит значение свойства.
Есть компромисс. При использовании этого метода ваше локальное свойство данных не реагирует на значение prop, поэтому любые изменения значения prop из родительского компонента не будут обновлять ваше локальное значение. Но это нормально, если вам действительно нужны эти обновления, вы можете комбинировать значения с помощью вычисляемого свойства.
9. Тестовое крепление или неглубокое крепление
Есть два способа создания и начальной загрузки компонентов в утилитах тестирования Vue. Одно крепление, а другое неглубокое; у обоих есть свои сильные и слабые стороны.
Техника монтирования очень хорошо работает, когда вы хотите провести взаимозависимое тестирование компонента и его подкомпонентов. Позволяет вам проверить, правильно ли родительский компонент взаимодействует со своими подкомпонентами, как ожидалось. Напротив, как следует из названия, метод неглубокого монтирования создает и отображает только родительский компонент в полной изоляции, не обращая внимания ни на один из его подкомпонентов.
Итак, какой метод лучше? Выбор за вами. Выбранные вами стратегии должны зависеть от ваших измеримых целей. При попытке протестировать компонент отдельно с полной изоляцией, неглубокий метод работает хорошо. Необходимо поработать над компонентом, у которого есть подкомпоненты, с которыми вы хотите обеспечить связь, а затем выберите вариант монтирования. Отличный вариант - использовать их оба. Вы не ограничены одним, так что комбинируйте его в соответствии с вашими потребностями в тестировании.
10. Возможности Vue-cli
Vue CLI - это мощный интерфейс командной строки, который позволяет разработчикам быстро использовать массу функций, которые могут ускорить ваш рабочий процесс.
Функция, которую я обычно использую, - это запуск vue serve и передача пути к компоненту Vue. Что замечательно в этом, так это то, что вы можете полностью разрабатывать компонент изолированно, но также получать горячую перезагрузку и итерацию по компоненту, пока его основные функции не исчезнут. Нет необходимости временно импортировать ваш новый компонент на страницу для разработки.
vue serve ./components/views/GoldenRule
При работе в команде вы можете выделить один конкретный компонент и поделиться им с другими. Это приводит к следующей функции Vue CLI; возможность экспортировать компонент Vue в виде библиотеки. При вызове Vue автоматически создаст отдельный файловый компонент, переместит CSS во внешний файл CSS (по желанию вы также можете встроить его), а также создаст файлы UMD и Common .js для импорта в другие проекты JS.
vue build —-target lib --name goldenRule ./components/views/GoldenRule
