vue-best-practices

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