vue-best-practices
SKILL.md
Vue 3 best practices, common gotchas, and performance optimization.
Reactivity
- Accessing ref() values without .value in scripts → See ref-value-access
- Destructuring reactive() objects, losing reactivity → See reactive-destructuring
- Choosing between ref() and reactive() for state → See prefer-ref-over-reactive
- Accessing refs inside arrays and collections → See refs-in-collections-need-value
- Large objects or external library data overhead → See shallow-ref-for-performance
- Using nested refs in template expressions → See template-ref-unwrapping-top-level
- Comparing reactive objects with === operator → See reactivity-proxy-identity-hazard
- Library instances breaking in reactive state → See reactivity-markraw-for-non-reactive
- Expecting watchers to fire for each state change → See reactivity-same-tick-batching
- Integrating external state management libraries → See reactivity-external-state-integration
- Deriving state with watchEffect instead of computed → See reactivity-computed-over-watcheffect-mutations
Computed
- Computed getter is making API calls or mutations → See computed-no-side-effects
- Mutating computed values causes lost changes unexpectedly → See computed-return-value-readonly
- Computed property doesn't update when expected → See computed-conditional-dependencies