Vue Best Practices

Набор лучших практик для Vue.js. ОБЯЗАТЕЛЬНО использовать для Vue.js задач. Стандартный подход: Composition API с <script setup> и TypeScript. Охватывает Vue 3, SSR, Volar, vue-tsc. Загружать при работе с .vue файлами, Vue Router, Pinia или Vite с Vue.

Основные принципы

• Состояние предсказуемо — один источник истины, всё остальное выводится
• Поток данных явный — props вниз, events вверх
• Маленькие сфокусированные компоненты — легче тестировать, переиспользовать и поддерживать
• Избегать лишних перерендеров — wisely использовать computed и watchers
• Читаемость важна — самодокументирующийся код

1) Подтвердить архитектуру перед кодированием (обязательно)

Стандартный стек: Vue 3 + Composition API + <script setup lang="ts">.

• Если проект явно использует Options API → загрузить vue-options-api-best-practices
• Если проект явно использует JSX → загрузить vue-jsx-best-practices

Обязательные справочники

Перед любой Vue-задачей прочитать и применить:

• references/reactivity.md
• references/sfc.md
• references/component-data-flow.md
• references/composables.md

Спланировать границы компонентов перед кодированием

Для любой нетривиальной фичи создать краткую карту компонентов:

• Одно предложение об ответственности каждого компонента
• Entry/root и route-level компоненты — только как поверхности композиции
• Определить props/emits контракты для каждого дочернего компонента
• Предпочтительная структура папок по фичам: components/<feature>/..., composables/use<Feature>.ts

2) Основы реактивности

• Минимальное исходное состояние (ref/reactive), всё производное через computed
• Watchers — только для side effects
• Не перевычислять дорогую логику в шаблонах

3) Структура SFC и безопасность шаблонов

• Порядок секций SFC: <script> → <template> → <style>
• Фокусированная ответственность SFC; разбивать большие компоненты
• Шаблоны декларативны — без side effects

4) Поток данных компонентов

• Props down, events up — по умолчанию
• defineModel() для двусторонней привязки (Vue 3.4+)
• provide/inject для глубоко вложенных зависимостей
• Избегать prop drilling через более двух уровней

5) Composables

• Называть с префиксом use: useUser, useCart
• Возвращать реактивные refs, не сырые значения
• Cleanup в onUnmounted для event listeners, intervals
• Не вызывать composables внутри условий или циклов

6) Производительность

• v-memo для тяжёлых списков с редко меняющимися данными
• shallowRef/shallowReactive для больших объектов без глубокой реактивности
• defineAsyncComponent для разбивки кода по маршрутам
• Уникальные стабильные :key для v-for — без использования индексов

7) TypeScript и Volar

• Включить strict: true в tsconfig.json
• Использовать generic-синтаксис для defineProps/defineEmits
• Проверять типы с помощью vue-tsc в CI