vue-patterns

Vue 3 Composition API best practices enforce type-safe props, named emits, and defineModel for two-way binding. Following these policies ensures robust, maintainable component definitions and prevents common anti-patterns.

State management in Vue 3 should prefer ref over reactive for consistency. It also emphasizes using InjectionKey with provide and inject to maintain type safety across your component hierarchy.

Use watch vs watchEffect in Vue 3 based on dependency tracking needs. watch explicitly specifies dependencies, while watchEffect auto-tracks them. The Skill guides proper usage to optimize reactivity and performance.

Optimize Vue 3 performance by using shallowRef for large objects, defineAsyncComponent for lazy loading, and v-memo for template caching. These techniques reduce unnecessary reactivity overhead and rendering costs.

Common Vue 3 Composition API anti-patterns include improper reactivity usage and untyped component definitions. This Skill highlights these frequent mistakes and provides correct alternatives to ensure code quality.

Yes, you can apply these Vue Composition API policies to a new TypeScript project. They establish a consistent coding standard for your team, preventing common pitfalls and improving code quality from the outset.