| Введение Composition API — самая большая особенность Vue3, и ясно видно, что он вдохновлен React Hooks. В этой статье в основном рассказывается о том, почему Vue использует новую концепцию для организации кода.
Чтобы решить какую проблему?
Во-первых, давайте посмотрим на появление этой новинки для решения проблем Vue 2. Общие проблемы в проектах, которые в настоящее время разрабатываются с помощью Vue2:
- Читабельность кода ухудшается по мере увеличения размера компонента.
- Каждый способ повторного использования кода имеет недостатки
- Поддержка TypeScript ограничена
Давайте подробно рассмотрим возникновение этих проблем и решения, предлагаемые Composition API.
Читабельность кода становится все хуже
Предположим, мы хотим написать компонент окна поиска, в первую очередь он имеет базовую функцию — поиск, структура кода следующая:Через некоторое время продакт-менеджер сказал, что добавилось требование сортировки, и код компонента стал таким:
В настоящее время все выглядит нормально, пока после одной итерации за другой, таких как добавление функций фильтрации поиска, функций подкачки и т. д., блоков кода для различных новых функций, написанных в разных местах проекта (разные компоненты, реквизиты, вычисляемые функции жизненного цикла). , данные, методы).
Фрагменты логики, разбросанные в разных местах, делают наши компоненты все более трудными для чтения, часто лихорадочно свайпая вверх-вниз по экрану, чтобы увидеть функцию, роясь и модифицируя в различных блоках.
В этом сценарии с помощью Composition API можно написать код одной и той же функции в той же области, что лучше с точки зрения ремонтопригодности и читабельности.Очевидно, что если мы можем собрать код одной и той же функции вместе, он будет более читабельным, чем отдельное написание, чего можно добиться с помощью новой настройки функции, предоставляемой Vue3. setup в настоящее время является необязательным атрибутом в Vue3, и он полностью совместим с исходным методом написания компонентов.
Когда я впервые увидел это грубое использование настройки, многие люди подумали, не требует ли это от меня написания огромной функции настройки и запихивания всей логики компонента в функцию настройки?
На самом деле, пока вы инкапсулируете различные коды функциональной логики в функции, такая гигантская функция настройки не появится. Эти инкапсулированные функции являются функциями композиции, или вы также можете назвать их «перехватчиками Vue».Этот метод организации кода с разделением кода на функциональные блоки очень хорошо решает первую проблему, давайте рассмотрим вторую проблему, которую необходимо решить дальше.
Не существует идеального решения для повторного использования кода
Когда дело доходит до повторного использования кода, в Vue2 есть три распространенных способа, каждый из которых имеет ограничения.
Повторное использование кода Vue2 1-Mixins
Плюсы миксинов: Код может быть организован и дифференцирован по функциям Минусы миксинов:
- Существует скрытая опасность конфликта, у вас может возникнуть одноимённый конфликт атрибутов или функций во время использования
- Зависимости не ясны, особенно если для связи существует несколько миксинов.
- Повторное использование логики недостаточно гибко, если вам нужно использовать Mixins для дифференциации или настройки между различными компонентами.
Повторное использование кода Vue2 2-Mixin Factory
Используйте фабричную функцию, чтобы вернуть соответствующий контент Mixin в соответствии с входящей конфигурацией. Вышеупомянутые 2 и 3 могут быть частично решены с помощью Mixin Factory, но что все еще не может быть решено, так это:
- Всегда существует опасность дублирования имен.
- Источник атрибутов все еще неясен, вам нужно войти в каждый файл Minxin, чтобы просмотреть открытые атрибуты.
- Не работает во время выполнения, поэтому фабричные функции Mixin не могут быть динамически сгенерированы.
Код Vue2 повторно использует слоты с 3 областями
преимущество: Все вышеперечисленные недостатки устранены недостаток:
- Конфигурация может быть написана только на шаблоне
- Добавлено вложение шаблонов для уменьшения читабельности
- Открытые свойства можно использовать только в шаблонах.
- Реализация той же функциональности требует вложения большего количества компонентов, что снижает производительность.
Мультиплексированный код Vue3
Можно видеть, что у каждого из вышеперечисленных методов повторного использования кода есть свои недостатки.Composition API Vue3 предоставляет четвертое решение повторного использования кода.
Абстрагируя повторно используемый код, наша организация кода может стать такой:
Таким образом, мы можем произвольно комбинировать и настраивать повторно используемую логику и помещать ее в функцию настройки для выполнения.
выгода:
- Без всяких разбросанных блоков мы можем писать меньше кода, и проще извлекать многократно используемую логику из компонентов в функции.
- Более гибкий, чем оригинальные методы Mixins или Slot
недостаток: Кроме использования нового синтаксиса, кажется, что других недостатков нет.
Эпилог
Надеемся, что после прочтения этой статьи вы получите некоторое представление о том, почему вам следует использовать Composition API.