VueUse — популярная библиотека, состоящая из небольших утилит и в среде Vue разработчиков, идущая как «must have» наряду с Pinia. Нисколько не умаляя вклад Anthony Fu в экосистему Vue, опишу, почему я не использую её и не рекомендую для серьезных проектов и опытных разработчиков.
-
Все утилиты в ней — небольшие. Под «небольшие» я подразумеваю, что аналогичный свой код будет в 10-50 строк. В зависимости от обстоятельств и требований, свой код может быть и в пять строк (аналог
onClickOutside), и в две (использованиеLocalStorage). Кроме того, на проект нужно обычно всего 2-3 подобных утилит оттуда. Подключать из-за этого всю библиотеку нецелесообразно, несмотря на tree-shaking. -
Это зависимость, и как все зависимости может измениться, устареть, получить уязвимость, тормозить развитие проекта и прочее, прочее. С большинством активно развивавшихся библиотек такое случалось.
-
Утилиты в ней не делают то, что надо именно тебе. Например, мне для адаптивности нужно ставить соответствующий динамичный CSS класс на
<body>при изменении ширины экрана. В библиотеке есть две утилиты, работающие с шириной экрана, но ни одна не дает именно то, что надо. Приходится преобразовывать данные отuseBreakpontsв свои, и весь код занимает половину кода своей реализации, которая достаточно проста и прямолинейна, и вполне может быть даже сгенерирована AI ботом. -
В утилитах
VueUseсодержится избыточная и чрезмерная логика и код (с точки зрения вашего конкретного проекта). Если бы это был простой js код, было бы еще ничего, но это реактивный код. Если открыть исходникиuseBreakponts, то можно увидеть с десятокcomputedпеременных, которые ты не используешь.
Но учитывая, что только в версии 3.4 Vue пофиксила баг, при котором компьютеды пересчитывались, хотя ни одна из входящих в них переменная не менялась, нет никаких гарантий, что при изменении экрана или сдвиге мышки не будет производиться множество не нужных тебе пересчетов. Это влияет на производительность. -
Указанная выше проблема, это не недостаток именно VueUse. Попробуйте написать универсальный компонент, который любой разработчик мог бы использовать. Примерно за 20% времени вы напишите вполне рабочий, подходящий вашему проекту компонент, и оставшиеся 80% будете лепить на него обвесы, чтобы он был универсальный и опциональный, учитывал Vue 2 и Vue 3, был SSR-safe и еще много чего, что конкретно вам не нужно.
В итоге лаконичный красивый эффективный код после универсализации превратится во множество проверок, адаптеров и прочей не функциональной логики. Поэтому написать свой код всегда намного эффективней использования чужого универсального. Речь сейчас идет конкретно про подобные утилитарные библиотеки, а не, к примеру, UI пакеты. -
useLocalStorageот VueUse возвращает реактивную переменную, которую, по идее, нужно напрямую использовать в проекте. Другими словами, если мне надо сохранять вLocalStorageshoppingCart, то ее нужно создать через вызовuseLocalStorage(). То есть, одна из основных бизнес-сущностей моего проекта должна создаваться какой-то сторонней библиотекой. Чужой код простой утилиты диктует реализацию элементов архитектуры всего проекта. Мне такое кажется абсолютно неприемлемым. -
Можно создать отдельно
shoppingCartи отдельно переменную черезuseLocalStorage()и затем заморочится с их синхронизацией черезwatchи предотвращением бесконечных циклов. И это для каждой такой переменной. Можно совсем довериться VueUse и использовать ихsyncRef. Но это уже даже не неприемлемо, а смешно, не говоря о том, что код в итоге получится больше, чем своё решение.
Таким образом, утилиты VueUse бывают просто неудобными в применении.Lodashпри использовании был очень удобным — берешь её функцию, и она максимально эффективно делает то, что надо. Из того, что я пытался применить в свои проекты, VueUse неудобен.Для примера, кастомная версия
useLocalStorageзанимает 35 строк и позволяет реактивно отобразить вLocalStorageлюбую реактивную переменную проекта просто зарегистрировав её. -
VueUse делается человеком, у которого свой взгляд на разработку. Иногда у него получаются вещи, которые я активно использую (
eslint-config), а иногда он, с моей точки зрения, пытается из Vue сделать конструктор типа Тильды для привлечения программеров невысокого уровня.
Есть большая разница между популяризацией (хорошо) и популизмом (плохо). Советы по использованию и даже навязывание VueUse разработчикам, без понимания ими того, что именно они получают и за какую цену, смахивает на второе..
Wikipedia
Попули́зм (от лат. populus — народ) — политика, апеллирующая к широким массам и обещающая им скорое и лёгкое решение острых социальных проблем. В основе популизма лежит стремление той или иной политической силы завоевать доверие и поддержку масс, понравиться народу. При этом реальные цели политиков-популистов (борьба за власть, обогащение и тому подобное), как правило, прикрываются социально-привлекательными идеями.
Интересная и полезная информация о Vue.js и фронтенде в целом на нашем сайте: Vue‑FAQ.org и Телеграм‑канале: @vuefaq
ссылка на оригинал статьи https://habr.com/ru/articles/792406/
Добавить комментарий