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

Определение компонента

Вот пример определения компонента с использованием синтаксиса <script setup>. Макросы defineProps и defineEmits используются для объявления компонента prop и event соответственно. Помощник withDefaults позволяет нам устанавливать значения по умолчанию для prop. Мы можем определить это как пользовательский фрагмент кода в нашем редакторе кода, который будет служить отправной точкой при создании нового компонента.

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

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

Независимо от того, являетесь ли вы новичком в Vue или используете его уже некоторое время, этот совет поможет вам сделать ваши компоненты Vue более чистыми и понятными.

Обертывание компонентов пользовательского интерфейса для инкапсуляции настраиваемого поведения — распространенная практика при создании собственной библиотеки пользовательского интерфейса, особенно в более крупных командах, где общая библиотека используется среди множества приложений. Основным преимуществом этого подхода является отделение зависимости от сторонней библиотеки, поскольку приложения-потребители вместо этого зависят от общей библиотеки.

Вам когда-нибудь нужен был плавный, непрерывный скроллинг для ваших проектов Nuxt? Вдохновленный современным подходом Райана Маллигана, я создал для вас идеальный отзывчивый компонент Nuxt. Метод Райана Маллигана служит отличной основой для этой реализации, поэтому не стесняйтесь ознакомиться с ним, чтобы получить более подробное объяснение задействованного CSS.

Давайте углубимся в то, как работает перехватчик Axios и как обеспечить остановку выполнения кода после ответа 401.

• 1. Обзор перехватчика Axios: Перехватчики Axios — это функции, которые Axios позволяет вам определять глобально для всех запросов или ответов. Эти функции можно использовать для изменения запросов или ответов, обработки ошибок или выполнения других задач до или после выполнения HTTP-запроса.
• 2. Проблема: В вашем случае вы хотите перенаправить пользователя на страницу входа при получении ответа 401 (несанкционировано). Однако вы также хотите убедиться, что после перенаправления дальнейший код не выполняется.
• 3. Остановка выполнения: В JavaScript промисы используются для обработки асинхронных операций, таких как HTTP-запросы. Когда обещание отклоняется, оно обычно перемещается в ближайший блок catch для обработки ошибки. Однако если вы хотите полностью остановить выполнение, вы можете создать исключение внутри блока catch.
• 4. Решение с объяснением: В перехватчике Axios, когда вы используете return Promise.reject('Unauthorized');, вы по сути генерируете исключение с сообщением Unauthorized. Это останавливает цепочку обещаний и гарантирует, что все последующие блоки .then() будут пропущены. В вашем случае это важно, поскольку вы не хотите дальнейшего выполнения кода после перенаправления.

Опциональный API — это основной метод создания компонентов в Vue. С появлением Vue 3 был представлен новый метод создания компонентов, названный API композиции.

В этой статье мы узнаем об API-интерфейсах параметров и API композиции, их различиях и о том, почему API композиции был представлен вместе с примером.

JavaScript считается одним из наиболее часто используемых языков программирования в мире, так как он не только отлично справляется с управлением элементами во внешнем интерфейсе; с помощью этого же языка вы можете создавать кроссплатформенные мобильные приложения, разрабатывать API-интерфейсы и работать с серверной инфраструктурой, а также создавать настольные приложения.

При написании моей библиотеки пользовательского интерфейса Vue.js, Inkline, мне пришлось найти способ заставить некоторые компоненты работать как с указанием значения модели ( v-model), так и без него. Хотя это не распространенный сценарий, вы обязательно столкнетесь с ним, если пишете библиотеку и серьезно относитесь к Developer Experience (DX).

Я называю их необязательно контролируемыми компонентами, потому что они должны работать из коробки без предоставления v-model, но предоставят вам полный контроль над их состоянием, если вы предоставите v-model.

Любой, кто начинает свою карьеру в качестве разработчика или инженера-программиста, наверняка сталкивался с проблемой выбора языка, фреймворка или инструментов, которые им нужно изучить в первую очередь. Я уверен, что все вы, должно быть, столкнулись с такой же ситуацией. Ответ на этот вопрос немного сложен, поскольку в индустрии разработки программного обеспечения доступно большое количество языков и фреймворков. Я подумал о сравнении трех фреймворков на основе JavaScript, поскольку JavaScript стал основой большинства процессов разработки.

Если у ваших однофайловых компонентов Vue есть зависимости, вам нужно как-то обрабатывать зависимости при модульном тестировании компонента.

Один из подходов заключается в установке зависимостей в тестовой среде, но это может усложнить ваши тесты.

В этой статье я покажу вам, как смоделировать файл модуля в Jest, заменив его на графике зависимостей вашего компонента.