26 советов для Vue, которые сэкономят ваше время

Никто не любит тратить своё время зря. При написании приложений на Vue вы можете потратить лишнее время на неправильные подходы. Новичку, а порой и опытному разработчику, не всегда известно, что станет камнем преткновения. В этой статье вы узнаете 26 полезных советов о разработке Vue-приложений, которые сэкономят ваше время и нервы!

Не забудьте поделиться этим материалом со своими коллегами!

1. Начните использовать Vuex, пока не поздно

Если вы работаете над чем-то сложнее todo-листа, то управлять данными во всём приложении становится сложно. Причём, обычно это не только данные, но и различныное взаимодействие между компонентами. В результате управлять всем этим становится очень сложно, и вы теряете кучу времени на отладку.

По этой причине Эван Ю создал Vuex. Нет нужды подключать это решение для маленьких проектов — вы можете хранить состояние внутри компонентов. Но для больших проектов Vuex — это необходимость.

Читайте статью Энтони Гора «Что такое Vuex? Гайд для новичков по хранилищу данных в Vue», в которой описаны проблемы, которые решают Vuex, а также примеры использования.

2. Поймите, как работают инстансы компонентов Vue

У Vue продумана архитектура, что повышает его производительность и уменьшает объём потребляемой памяти. Понимание того, как компоненты работают под капотом, поможет вам ещё лучше оптимизировать ваше приложении. Правда, советы пригодятся только тогда, когда компонентов у вас будет довольно много.

Тем не менее, это всё равно интересно! В достаточно короткой, но насыщенной пользой статье, Джошуа Бемендерфер рассказывает как работают экземпляры компонентов в Vue.

3. Как правильно принудительно перерендерить компонент Vue

В 99% случаев, когда что-то неправильно отображается, это проблема реактивности. Поэтому если вы ещё новичок в Vue, вам обязательно нужно узнать как можно больше о реактивности. Я считаю, что это один из главных камней преткновения для новичков.

Так что, если вы новичок в Vue, вам обязательно нужно узнать как можно больше о реактивности. Я считаю, что это одна из главных претензий для новых разработчиков.

Тем не менее, иногда вам нужна кувалда (или костыли), чтобы сделать задачу и задеплоить ваш код. Дедлайны, к сожалению, сдвигать нельзя. Поэтому принудительный повторный рендеринг компонента на самом деле является лучшим способом для решения проблемы отображения вашего компонента (но очень и очень редко).

Кстати, это самая популярная статья Майкла Тиссена — про правильный способ перерисовки компонента.

4. Vue не обрабатывает несколько корневых узлов (пока что)

Речь идёт о root nodes — корневом элементе, в который обёрнут ваш компонент. Однако не для всех компонентов имеет смысл использовать один корневой узел.

Например, если вы визуализируете список элементов, целесообразнее просто возвращать список узлов в виде массива. Зачем лишний раз оборачивать его в тег ol или ul? Это называется фрагментом (понятие из React).

В настоящее время Vue не поддерживает фрагменты, хотя в 3-ей версии они появятся.

Эта штуковина (фрагменты) недавно появилась в React, но для её реализации потребовалось переписать систему рендеринга. У Vue сейчас такая же ситуация.

Тем не менее, пока все мы ждём выхода Vue 3, вы можете использовать функциональные компоненты, чтобы обойти это ограничение. Энтони Гор написал об этом статью с примерами функциональных компонентов.

5. Валидируйте формы по-простому — используйте Vuelidate

На одной из моих прошлых работ, я был уверен, что моё описание работы было таким: «Конструировать базы данных и формы». Я чувствовал себя так, как будто каждый день я делал форму после формы после формы. Но в этом был смысл. Формы — главный способ получить от пользователя информацию, и они необходимы для работы наших приложений. Это и приводит к тому, что мы регулярно делаем много форм.

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

Именно по этой причине появился Vuelidate. Это библиотека, которая упрощает работу с проверкой форм, позволяет писать свои валидаторы, а также берёт на себя всю рутину.

Изучите как настроить Vuelidate в статье «Простая валидация форм в Vue с помощью Vulidate» от Добромира Христова.

6. Делайте компоненты, которые умеют хорошо общаться между собой

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

Кевин Бол написал статью «Как правильно сделать компоненты Vue, которые хорошо взаимодействуют между собой», в которой описал те вещи, о которых стоит помнить при написании своих компонентов.

7. Не пишите одноразовые транзишены — сделайте их многоразовыми

Транзишены — действительно классная штука в Vue. Если вы ещё не читали про них, то знайте, что они — простой способ добавить красивую анимацию в ваше приложение. Но вы же не хотите переписывать один и тот же код раз за разом?

В статье «Создание переиспользуемых транзишенов во Vue» Кристи Жора показывает, как писать компоненты, чтобы транзишены можно было использовать повторно. В ней также рассмотрены концепции повторного использования кода, которые вы можете применять и в остальных частях своего приложения.

8. Изучите как использовать Axios для получения данных

Почти каждое приложение должно получать и отправлять данные. Самая популярная библиотека, которая помогает в этом — Axios. Она гибко настраивается и значительно облегчает работу с внешними данными.

Конечно, вы можете использовать стандартный fetch в большинстве случаев. Правда, скорее всего вы также напишете свою обёртку над этим методом, чтобы упростить код.

Самое время начать использовать Axios вместо этого. Изучите, как интегрировать axios в ваше Vue-приложение в статье «Использование API с помощью Axios» от Джошуа Бемендерфера.

9. Используйте vue-router для роутинга на клиенте

Если вы осуществляете роутинг на клиенте, то написать своё решение в целом не сложно. На самом деле это просто — сопоставить маршруты и поменять после этого компоненты.

Однако использование vue-router ещё проще! К тому же, это официальный пакет Vue, поэтому вы можете не беспокоиться по поводу совместимости и поддержки.

И как только вы начнёте работать с:

• запросами
• параметрами маршрута
• вложенными маршрутами
• динамическим сопоставлением маршрутов
• транзишенами

…а вы, скорее всего, начнёте с этим работать, то написание своего решения станет слишком сложным, громоздким. Поэтому вместо этого читайте гайд по vue-router от Эда Зынды «Начало работы с Vue Router».

10. Создавайте фильтры для повторного использования форматирования

Форматирование данных может раздражать и утомлять. Если вы работаете с большим количеством цифр, процентов, дат, валют, имён или чего-то подобного, то наверняка у вас есть функции, которые форматируют эти данные перед показом пользователю.

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

Рашид Лаасри написал подробную инструкцию с множеством примеров по использованию фильтров в Vue.

11. Убедитесь, что избавились от надоедливых ошибок и предупреждений

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

Одно из самых распространённых предупреждений, которые получает разработчик во время изучения Vue, выглядит так:

К счастью, Майкл Тиссен написал статью «Свойство или метод не определено» о таких предупреждениях, и что с ними делать, как их избежать.

12. Не бойтесь JSX — он крайне функциональный и мощный

Многие разработчики бояться JSX. У него странный синтаксис, и с первого раза его может быть сложно понять.

JSX полезен, когда вы делаете переиспользуемые компоненты высокого порядка. Однако это не единственный плюс JSX.

Самуэль Олорунтоба (Samuel Oloruntoba) написал отличное введение в JSX для Vue, и почему так классно, что Vue поддерживает его.

13. Выясните, как работать с событием наведения мыши

В CSS довольно легко изменить состояние элемента при наведении курсора. Мы просто используем псевдо-класс :hover:

.item {
  background: blue;
}

.item:hover {
  background: green;
}

В Vue это немного сложнее, потому что у нас нет встроенного функцонала для этого. Мы должны реализовать его сами. Не стоит переживать, потому что это не так много работы.

Майкл Тиссен написал подробную статью про использование hover в Vue. В ней описано много интересных вещей:

• Как реализовать hover-эффект в Vue,
• Как показать элемент при mouseover,
• Как динамически изменять классы у элементы при mouseover,
• Как это сделать даже в кастомных компонентах Vue и многое другое.

14. Добавьте поддержку v-model в кастомные компоненты

У веб-разработчиков работа вращается вокруг получения данных из различных полей ввода. В Vue есть директива v-model, которая является синтаксическим сахаром. Она даёт нам возможность двусторонней привязки данных. Это отлично подходит для входных данных, поскольку значительно упрощает работу с ними.

Но знаете ли вы, что можете добавить поддержку v-model для своих собственных компонентов? Джошуа Бемендерфер написал статью о том, как это можно сделать.

15. Исправьте ошибку «this is undefined»

Возможно, это одна их самых распространённых ошибок, с которыми вы можете столкнуться при разработке Vue-приложения. Я привык сталкиваться с ней всё время. Но теперь я точно знаю, что я делал не так. Ошибка связана с типом функции, которую вы используете, и тем, как вы её используете.

Все подробности разобраны в отдельной статье Майкла Тиссена.

16. Используйте готовый CSS-фреймворк

Написание своего CSS-кода с учётом всех тонкостей и вариантов использования может занимать кучу времени. Я предлагаю просто использовать CSS-фреймворк, где большая часть работы уже сделана (состояния форм, кнопок, анимации, популярные компоненты и т. д.).

Классно здесь то, что таких фреймворков много:

• Tailwind,
• Bootstrap,
• Bulma,
• Foundation,
• и ещё множество других.

И вам не нужно тратить время, чтобы понять как интегрировать их в своё приложение: Дэйв Бернинг написал отличную статью про то, как начать использовать CSS-фреймворки.

17. Отслеживание вложенных данных в Vue

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

Поскольку это такая распространённая проблема, Майкл Тиссен написал подробную статью о том, как использовать Watchers для вложенных данных. В ней также рассматриваются некоторые более продвинутые инструменты, которые предоставляют Watchers.

18. Показывайте состояния загрузки и ошибок в ваших асинхронных компонентах

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

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

19. Приберитесь в своих Props наконец!

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

<v-btn
  color="primary"
  href="https://michaelnthiessen.com"
  small
  outline
  block
  ripple
>
  Hello
</v-btn>

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

Алекс Джовер Моралес (Alex Jover Morales) написал отличную статью, в которой описываются различные способы наведения порядка в Props: «Передача нескольких свойств в Vue-компонент».

20. Не путайте вычисляемые пропсы (computed props) и вотчеры (watchers)

Я знаю, что большинство людей случайно не используют computed props, когда они думали написать watcher. Это просто неразумно. Но я также вижу много людей, которые используют watcher, когда им следует вместо этого использовать computed prop. Или используют computed prop, когда лучше использовать watcher.

Хоть вам и кажется, что они (watchers и computed props) делают похожие вещи, на самом деле они совершенно разные.

Моё эмпирическое правило: сделайте computed prop!

Если вы хотите узнать больше о разнице watchers и computed props, прочитайте статью Майкла Тиссена «В чём разница между Watchers и Computed Props?» на эту тему.

21. Остерегайтесь некоторых популярных ошибок

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

Вместо того, чтобы бороться с этими подводными камнями, как я это делал, вы можете избежать большинства из них. Почитайте статью «Популярные подводные камни Vue» от Джошуа Бемендерфера, и сохраните свои нервы и время!

22. Изучите разницу между Props и Data

В Vue используется два разных способа хранения данных внутри компонентов: props и data. Это может путать, потому что на первый взгляд они делают одни и те же вещи.

Ответ на вопрос включает в себя реактивность, конфликты имён и направление потока данных (спойлер: сверху вниз).

В статье про разницу между props и data также рассмотрено, что из них в какой ситуации надо использовать. Это действительно важная тема для понимания. Убедитесь, что разобрались в этом вопросе!

23. Правильно вызывайте методы при загрузке страницы

Обычное дело для веб-приложения— осуществлять какие-то операции при загрузке страницы. Например, загружать данные с сервера или управлять DOM. Однако существует множество способов делать это неправильно во Vue.

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

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

24. Изучите, как передать функцию в качестве пропса

Короткий ответ: никак.

Вряд ли вас устроит такой ответ, поэтому разберём вопрос подробнее. Эта ситуация возникает из-за двух основных причин:

1. Вам нужно взаимодействие от дочернего компонента к родителю,
2. Вам нужно абстрагировать поведение вашего компонента определённым образом.

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

Если вы хотите разобраться с тем, как эти инструменты решают обе проблемы, а также о разнице между работой React и Vue, то читайте статью Майкла Тиссена «Как передать функцию в качестве пропса во Vue».

25. Разберитесь, почему мутация пропсов — это анти-паттерн

Скорее всего, вы уже встречали такую ошибку:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.

Почему мутация пропсов напрямую не рекомендуется во Vue, и что делать вместо этого? На эту тему есть отличная статья Майкла Тиссена «Vue Error: избегайте мутации Props напрямую». В ней также рассмотрены и случаи возникновения таких ошибок, и способы их решения. В статье также затронут случай возникновения этой ошибки при использовании v-model, так как в нём есть тонкости.

26. Динамически добавляйте CSS-классы

Vue очень органично объединяет HTML и Javascript, однако мы не можем забывать и о CSS. CSS та вещь, которая делает наши приложения действительно красивыми, являясь при этом мощным инструментом.

Довольно общим паттерном в веб-приложениях является добавление и удаление классов в зависимости от состояния приложения. Мы делаем это, чтобы отключить кнопку, анимировать элементы вроде экранов загрузки и кучи других штук.

Vue предоставляет нам много способов для динамического добавления и удаления CSS-классов на основе событий приложения. Знание того, как это работает, поможет вам писать более изящный и эффективный код.

Майкл Тиссен написал статью, которая описывает все способы динамического добавления и удаления CSS-классов во Vue. Там рассматривается синтаксис массивов и объектов, использование javascript-выражений для вычисления css-классов и динамического добавления классов в пользовательских компонентах (вам не придётся добавлять свой class prop!). Вы даже можете генерировать свои имена CSS-классов на лету!

Понравилась статья? Лайк и репост! Остались вопросы, есть замечания к переводу? Пишите в комментариях!