Рубрика: Мир JS

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

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

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

В этой статье хотелось бы начать освещать вопрос лучшего опыта повторного использования Vue компонентов. Разработчики часто ведут поиск информации на тему наследования компонентов во Vue. Вероятно, что это связано с тем, что наследование – самый очевидный и частый способ, которым обычно программисты добиваются повторного использования кода, если требуется обеспечить похожее (но с некоторыми отличиями) с имеющимся поведение.

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

Сложно представить себе Vue-приложение, которое состоит из 1-2 компонентов. Обычно у нас есть десятки и даже сотни строительных блоков. Компоненты складываются в иерархическую структуру. Основной способ передать какие-либо данные с верхних уровней элементов к нижним – свойства компонентов. Для передачи чего-либо в обратном направлении обычно служат события. Однако, если какие-либо данные необходимо передавать через несколько уровней вложенности, то такой подход будет очень трудоемким. Скорее всего также, часть компонентов на пути передачи данных будут в этом лишь посредниками. То есть они будут получать данные, которые им самим не нужны. И это нарушает принципы SOLID. Такой подход станет еще более обременительным, если данные нужно передавать между соседними ветками иерархии.

VueUse – это коллекция утилит для Vue Composition API, которая содержит средства для взаимодействия с различными сенсорами, API состояния, анимацией и другими возможностями браузеров. Помимо этого, также, включает в себя ряд интеграций со сторонними популярными пакетами.

При создании сложного приложения на Vue.js на ряде страниц (в ряде компонентов) могут понадобиться общие для части проекта данные. При этом они не настолько общие и часто употребимые, чтобы загружать их сразу при обращении к любой странице. Хорошо бы загрузить эти данные сразу при посещении одной из тех страниц, где они нужны. И далее хранить с возможностью использовать на других страницах без повторной загрузки.