Список плохих вещей, которые я обнаружил на своей новой работе

Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »

Не так давно устроился на новую работу. И когда я впервые увидел кодовую базу, меня это испугало. Здесь я хочу показать, чего следует избегать в приложениях Vue.js.

Статические свойства в данных / вычисленные

Нет причин передавать статические свойства в data и особенно в computed. Когда вы это делаете, Vue делает эти свойства реактивными, но в этом нет необходимости.

Думая, что нереактивные данные будут реактивными

Помните: Vue - это не волшебник. Vue не знает, когда ваши файлы cookie обновляются.

Я упомянул файлы cookie, потому что мой коллега потратил 2 часа, чтобы понять, почему его вычисленное свойство не обновляется.

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

Смешивается с вещами, которые нужно сделать один раз

Миксины подходят * кто-то сейчас закрывает сообщение *… В некоторых случаях миксины подходят:

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

Но один человек сделал глобальный миксин с очень медленными действиями в mounted хуке. Почему нет? Потому что он вызывается при каждом монтировании компонента, но также может вызываться только один раз.

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

Некорректная работа с setTimout / setInterval

На собеседовании один из разработчиков интерфейса в моей команде спросил меня, можем ли мы использовать таймауты / интервалы в компонентах. Я ответил «Да» и хотел объяснить, как это сделать правильно , но меня обвинили в некомпетентности.

Я посвящаю эту часть человеку, чей код я должен поддерживать сейчас

Мутирующие родители

То, что мне очень не нравится во Vue, и я хочу, чтобы его удалили (Эван, пожалуйста)

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

Проверка формы if / else

Я был очень сбит с толку, когда обнаружил формы с ручной проверкой. Он генерирует много бесполезного шаблонного кода.

Вместо заключения

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

Итак, что «интересного» вы видели в проектах Vue.js? Ответьте здесь, если вам есть что сказать :)

Спасибо за прочтение! И не повторяйте глупых ошибок :)

Особая благодарность людям, которые вносят свой вклад в carbon.now.sh. Это действительно приятно!