В прошлой статье мы сделали на Vue 3 с нуля таблицу для отображения данных, получаемых с сервера. Эта таблица имеет разбивку на страницы и возможность менять сортировку. А в этой новой статье будет показано как сделать тот код более пригодным для повторного использования. Будет рассказано о технике, которая делает компоненты гораздо более универсальными.
Читать далееРубрика: Vue.js
Паттерны, приемы и все что связано с фреймворком Vue.js
Таблица на Vue 3. Создание компонента
Данная статья появилась на свет по двум причинам. Во-первых ряд читателей приходили с вопросами о создании компонента-таблицы на Vue. Во-вторых в прошлой статье мы подошли к продвинутому использованию слотов. И такой компонент послужил бы неплохим кандидатом для применения данных техник. Сами техники эффективного расширения компонентов слотами будут продемонстрированы в следующей статье. А в этой будет описано создание начальной версии таблицы, которую потом можно будет развивать.
Читать далееVue. Пути улучшения возможностей повторного использования ваших компонентов
В этой статье хотелось бы начать освещать вопрос лучшего опыта повторного использования Vue компонентов. Разработчики часто ведут поиск информации на тему наследования компонентов во Vue. Вероятно, что это связано с тем, что наследование — самый очевидный и частый способ, которым обычно программисты добиваются повторного использования кода, если требуется обеспечить похожее (но с некоторыми отличиями) с имеющимся поведение.
Но повторное использование можно (и даже оптимальнее) осуществлять за счет других подходов. Набор приемов куда как более велик. Предлагаю вам поразмышлять на эту тему вместе с автором в нескольких статьях.
Читать далееVuex или Pinia. Что выбрать?
Сложно представить себе Vue-приложение, которое состоит из 1-2 компонентов. Обычно у нас десятки и даже сотни строительных блоков. Компоненты складываются в иерархическую структуру.
Основной способ передать какие-либо данные с верхних уровней элементов к нижним — использование свойств компонентов. Для передачи чего-либо в обратном направлении обычно используют события.
Однако, если какие-либо данные необходимо передавать через несколько уровней вложенности, то этот подход будет очень трудоемким. Скорее всего, часть компонентов на пути передачи данных будут в этом лишь посредниками. То есть они будут получать данные, которые им самим не нужны. А это нарушает принципы SOLID. Такое решение станет еще более обременительным, если данные нужно передавать между соседними ветками иерархии.
Читать далееVueUse
VueUse — это коллекция утилит для Vue Composition API, которая содержит средства для взаимодействия с различными сенсорами, API состояния, анимацией и другими возможностями браузеров. Помимо этого, также, включает в себя ряд интеграций со сторонними популярными пакетами.
Читать далееTanStack Query (Vue Query)
При создании сложного приложения на Vue.js на ряде страниц (в ряде компонентов) могут понадобиться общие для части проекта данные. При этом они не настолько общие и часто употребимые, чтобы загружать их сразу при обращении к любой странице. Хорошо бы загрузить эти данные сразу при посещении одной из тех страниц, где они нужны. И далее хранить с возможностью использовать на других страницах без повторной загрузки.
Читать далееVue JavaScript Debug в Intellij IDEA, PHPStorm или WebStorm
В одной из предыдущий статей была описана настройка отладки xDebug в IDEA (PHPStorm). Но какое же современное web приложение без JavaScript? Поэтому полезно будет описать и настройку отладки frontend части.
Читать далееPortalVue — Teleport для Vue шаблонов
При создании и росте сложного SPA приложения построить хорошую архитектуру становится все труднее. Порой данные, которые доступны в одном компоненте нужно отобразить в другом компоненте.
Представим себе список проблем (issues) как на github и в уголке страницы значок с числом не просмотренных проблем. Когда пользователь заходит в просмотр одной из проблем, то в списке она меняет вид, так как стала прочитанной. При этом и значок с числом должен уменьшить его. И так как это разные компоненты, которые могут быть не вложены один в другой, то встанет вопрос откуда брать данные для обои. «Vuex», — скажите вы. Но не всегда это будет удобно и верно.
Читать далееVue.js scoped slots и renderless component
Продолжая рассматривать способы повторного использования кода в vue.js (тема затронута ранее в статьях Повторное использование кода Vue.js и Vue.js Composition API) можно встретить упоминания некоего приема с использованием не отображаемых компонентов и слотов с ограниченной областью видимости (scoped slots).
Читать далееVue.js Composition API
Продолжая разбирать тему повторного (начало в статье Повторное использование кода Vue.js) использования кода Vue.js, я пришел к Composition API, который является основным новшеством Vue 3. Его также можно использовать во 2 версии Vue, если установить как отдельный пакет. В сети эти изменения вызвали бурное обсуждение, зачастую негодование, среди тех, кто пользуется данным фреймворком и создал не мало кода на старом API (Options API). Давайте разберемся почему появился новый API, как его использовать и в чем его плюсы.
Читать далееПовторное использование кода Vue.js
По мере усложнения приложения, в котором львиная доля кода использует Vue.js, возникает вопрос повторного использования кода. Когда возможности расширить тот или иной компонент с помощью параметров или слотов уже не удовлетворяют всех потребностей, можно прибегнуть в другим способам.
Читать далееVuetify — UI библиотека для Vue.js
В настоящее время web приложения уже трудно представить без сложных элементов управления, таких как интерактивные таблицы с данными, диалоговые окна, выпадающие меню и иерархические деревья. Писать весь этот набор компонентов самостоятельно, для того, чтобы решить бизнес задачи — долго и обременительно. Но к счастью существуют уже готовые решения, которые берут на себя создание такой инфраструктуры. Одно из них — Vuetify.
Читать далее