vue-best-practices

Umiejętność dla deweloperów Vue.js, która prowadzi Cię przez najlepsze praktyki Vue 3, w tym Composition API ze <script setup>, TypeScript i optymalizację wydajności. Obejmuje reaktywność, SSR, integrację z Volar, vue-tsc, Vue Router i Pinia. Załaduj ją do każdego projektu Vue – będzie pilnować, abyś unikał pułapek reaktywności, błędów z ref() i reactive(), oraz zagadnień wydajności. Zawsze preferuje Composition API, chyba że projekt wymaga jawnie Options API.

1. Załaduj umiejętność vue-best-practices w swoim środowisku Claude/Copilot/Codex przed pracą nad projektem Vue.js. Aktywuj ją dla dowolnych zadań związanych z plikami .vue, konfiguracją Vue Router, Pinia lub Vite z Vue.

2. Kiedy pracujesz nad komponentem lub logiką Vue, umiejętność automatycznie sugeruje użycie Composition API z <script setup> i TypeScript jako standardowego podejścia. Jeśli projekt jawnie wymaga Options API, poinformuj umiejętność – w przeciwnym razie będzie kierować Cię ku Composition API.

3. Zwróć uwagę na ostrzeżenia dotyczące reaktywności: dostęp do wartości ref() bez .value w skryptach, destrukturyzacja reactive() tracąca reaktywność, mieszanie ref() i reactive() bez jasnego powodu, oraz używanie ref() wewnątrz tablic bez rozpakowywania.

4. Gdy pracujesz z dużymi obiektami lub bibliotekami zewnętrznymi, umiejętność podpowie użycie shallowRef() zamiast zwykłego ref() dla poprawy wydajności, oraz markRaw() dla instancji bibliotek, które nie powinny być reaktywne.

5. Dla logiki pochodnej stanu preferuj computed() zamiast watchEffect() – umiejętność będzie przypominać o tym rozróżnieniu. Pamiętaj o batching zmian reaktywnych w tym samym ticku i prawidłowym użyciu watchers.

6. Korzystaj z umiejętności jako przewodnika przez integrację zewnętrznych bibliotek zarządzania stanem, obsługę SSR, oraz konfigurację narzędzi takich jak Volar i vue-tsc dla lepszego wsparcia typu w projekcie.