Список плохих вещей, которые я обнаружил на своей новой работе
Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »
Не так давно устроился на новую работу. И когда я впервые увидел кодовую базу, меня это испугало. Здесь я хочу показать, чего следует избегать в приложениях Vue.js.
Статические свойства в данных / вычисленные
Нет причин передавать статические свойства в data
и особенно в computed
. Когда вы это делаете, Vue делает эти свойства реактивными, но в этом нет необходимости.
Думая, что нереактивные данные будут реактивными
Помните: Vue - это не волшебник. Vue не знает, когда ваши файлы cookie обновляются.
Я упомянул файлы cookie, потому что мой коллега потратил 2 часа, чтобы понять, почему его вычисленное свойство не обновляется.
Кроме того, я рекомендую вам не использовать какие-либо побочные данные в вычисляемых свойствах. В ваших вычисленных свойствах не должно быть побочных эффектов. Это сэкономит вам много времени. Поверьте мне
Смешивается с вещами, которые нужно сделать один раз
Миксины подходят * кто-то сейчас закрывает сообщение *… В некоторых случаях миксины подходят:
- Создание плагинов, которые изменяют экземпляр Vue, предоставляя новые функции
- Использование общих специфических методов в разных компонентах / во всем приложении
Но один человек сделал глобальный миксин с очень медленными действиями в mounted
хуке. Почему нет? Потому что он вызывается при каждом монтировании компонента, но также может вызываться только один раз.
Я не буду показывать этот код. Вместо этого, чтобы было понятнее, я покажу вам более простой пример.
Некорректная работа с setTimout / setInterval
На собеседовании один из разработчиков интерфейса в моей команде спросил меня, можем ли мы использовать таймауты / интервалы в компонентах. Я ответил «Да» и хотел объяснить, как это сделать правильно , но меня обвинили в некомпетентности.
Я посвящаю эту часть человеку, чей код я должен поддерживать сейчас
Мутирующие родители
То, что мне очень не нравится во Vue, и я хочу, чтобы его удалили (Эван, пожалуйста)
Я не вижу реальных вариантов использования $parent
. Это делает компоненты негибкими и может запутать вас с неожиданными проблемами.
Проверка формы if / else
Я был очень сбит с толку, когда обнаружил формы с ручной проверкой. Он генерирует много бесполезного шаблонного кода.
Вместо заключения
Это не все грехи, которые совершают младшие разработчики Vue.js, и я уверен, что этот список может быть бесконечным. Но думаю, этого вполне достаточно.
Итак, что «интересного» вы видели в проектах Vue.js? Ответьте здесь, если вам есть что сказать :)
Спасибо за прочтение! И не повторяйте глупых ошибок :)
Особая благодарность людям, которые вносят свой вклад в carbon.now.sh. Это действительно приятно!