vue-expert - Компоненты Vue и реактивное состояние

Когда звать

• Когда Vue-компоненту нужны понятные props, вычисляемое состояние и повторное использование логики.
• Когда требуется разобрать Pinia, реактивность, эффекты или ошибки типов в Vue 3.

На какой Vue ориентируется скилл

Vue Expert посвящён Vue 3 с Composition API и TypeScript. В проверенном файле указана версия 1.1.0. Автор охватывает компоненты, composables, Pinia, Nuxt 3, сборку Vite, а также гибридные мобильные приложения и PWA.

Его стоит рассмотреть, если компонент одновременно получает данные, хранит состояние и управляет эффектами. Инструкция предлагает сначала определить иерархию компонентов, маршруты и владельца состояния. Потом агент решает, какую логику вынести в composable, а какие данные действительно должны попасть в общий store.

Какие правила заданы компонентам

Автор требует <script setup> и типизированные props. Для примитивных значений предпочитает ref, для объектов - reactive, а производные значения предлагает вычислять через computed. Если достаточно computed, добавлять watch по правилам скилла не нужно.

В коротком примере счётчик получает начальное значение из props, хранит локальный ref и вычисляет удвоенное число. Он показывает разделение входного параметра и внутреннего состояния. Прямое изменение props в ограничениях запрещено.

Для побочных эффектов инструкция требует правильные lifecycle hooks и очистку ресурсов в composables. К DOM нельзя обращаться до onMounted; watchers и эффекты нельзя оставлять без завершения. Это конкретные пункты для ревью формы, подписки или компонента с обработчиками событий.

Состояние, Nuxt и сборка

Общее состояние автор направляет хранить в Pinia. В списке запретов есть смешивание Options API и Composition API; Vuex инструкция не предлагает. Для существующего проекта это предпочтение скилла нужно сопоставить с принятой архитектурой до переделки всех компонентов.

В таблице справочников есть отдельные темы по props, emits, slots и provide/inject. Для Nuxt перечислены серверный рендеринг, маршрутизация по файлам, useFetch и hydration. Мобильные сценарии направляют к Quasar, Capacitor и service worker; сборочные - к настройкам Vite и sourcemaps.

Мы прочитали описание этих справочников в SKILL.md. Это не означает, что в рамках карточки были развёрнуты Nuxt или мобильное приложение. При переносе файлов сохраняйте references, чтобы указатели основного документа оставались рабочими.

Как проверить применение

Автор требует vue-tsc --noEmit, проверку реактивности через Vue DevTools и компонентные тесты Vue Test Utils с Vitest. При падении теста агент должен выяснить, ошибочен компонент или само ожидание, и только после исправления повторить запуск.

Пример первого запроса: «Вынесите загрузку списка в composable. Сохраните типы props, очистите эффект при размонтировании и добавьте тест смены параметра». Это ограниченная проверка работы с реактивностью. На сдаче полезно увидеть компонент, composable при необходимости, store только при общей потребности и объяснение владельца каждого состояния.

Способы подключения взяты из QUICKSTART автора. Плагин добавляет всю коллекцию; установка в Claude Code и Codex здесь не испытана. Сложные типы отдельно описывает TypeScript Pro.