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
• Sorting or reversing arrays destroys original data → See computed-array-mutation
• Expensive operations running too frequently every render → See computed-vs-methods-caching
• Trying to pass arguments to computed properties → See computed-no-parameters
• Complex conditions bloating inline class bindings → See computed-properties-for-class-logic

Watchers

• Need to watch a reactive object property → See watch-reactive-property-getter
• Large nested data structures causing performance issues → See watch-deep-performance
• Dependencies accessed after await not tracking → See watcheffect-async-dependency-tracking
• Need to access updated DOM in watchers → See watch-flush-timing
• Uncertain whether to use watch or watchEffect → See watch-vs-watcheffect
• Duplicating initial calls and watch callbacks → See watch-immediate-option
• Can't compare old and new values correctly → See watch-deep-same-object-reference
• Template refs appearing null or stale → See watcheffect-flush-post-for-refs

Components

• Prop values being changed from a child component → See props-are-read-only
• Grandparent can't listen to grandchild emitted events → See component-events-dont-bubble
• Distinguishing Vue components from native elements → See component-naming-pascalcase
• Recursive component needs to reference itself → See self-referencing-component-name
• Bundle includes components that aren't used → See prefer-local-component-registration
• Tight coupling through component ref access → See prefer-props-emit-over-component-refs

Props & Emits

• Boolean prop not parsing as expected → See prop-boolean-casting-order
• Composable doesn't update when props change → See prop-composable-reactivity-loss
• Destructured props not updating watchers → See prop-destructured-watch-getter
• Prop validation needs component instance data → See prop-validation-before-instance
• Event name inconsistency in templates and scripts → See emit-kebab-case-in-templates
• Event payloads need validation during development → See emit-validation-for-complex-payloads

Templates

• Rendering untrusted user content as HTML → See v-html-xss-security
• Filtering or conditionally hiding list items → See no-v-if-with-v-for
• Functions in templates modifying data unexpectedly → See template-functions-no-side-effects
• Performance issues with filtered or sorted lists → See v-for-use-computed-for-filtering
• Deciding between v-if and v-show for conditionals → See v-if-vs-v-show-performance

Forms & v-model

• Need to handle v-model modifiers in child → See definemodel-hidden-modifier-props
• Need to use updated value immediately after change → See definemodel-value-next-tick
• Migrating Vue 2 components to Vue 3 → See v-model-vue3-breaking-changes

Events & Modifiers

• Need to handle same event only one time → See event-once-modifier-for-single-use
• Keyboard shortcuts fire with unintended modifier combinations → See exact-modifier-for-precise-shortcuts
• Using left-handed mouse or non-standard input devices → See mouse-button-modifiers-intent
• Preventing default browser action and scroll performance together → See no-passive-with-prevent

Lifecycle

• Lifecycle hooks don't execute asynchronously → See lifecycle-hooks-synchronous-registration
• Expensive operations slow performance drastically → See updated-hook-performance

Slots

• Accessing child component data in slot content → See slot-render-scope-parent-only
• Mixing named and scoped slots together → See slot-named-scoped-explicit-default
• Using v-slot on native HTML elements → See slot-v-slot-on-components-or-templates-only
• Empty wrapper elements rendering unnecessarily → See slot-conditional-rendering-with-slots
• Scoped slot props lack TypeScript type safety → See slot-define-slots-for-typescript
• Rendering empty component slots without defaults → See slot-fallback-content-default-values
• Confused about which slot content goes where → See slot-implicit-default-content
• Expecting name property in scoped slot props → See slot-name-reserved-prop
• Choosing between renderless components and composables → See slot-renderless-components-vs-composables

Provide/Inject

• String keys collide in large applications → See provide-inject-symbol-keys
• State mutations scattered across components → See provide-inject-mutations-in-provider
• Passing props through many component layers → See avoid-prop-drilling-use-provide-inject

Attrs

• Accessing hyphenated attributes in JavaScript code → See attrs-hyphenated-property-access
• Watching fallthrough attributes for changes with watch() → See attrs-not-reactive

Composables

• Composable has unexpected side effects affecting external state → See composable-avoid-hidden-side-effects
• Building complex logic from smaller focused composables → See composable-composition-pattern
• Inconsistent composable names or destructuring loses reactivity → See composable-naming-return-pattern
• Composable has many optional parameters or confusing argument order → See composable-options-object-pattern
• Need to prevent uncontrolled mutations of composable state → See composable-readonly-state
• Unsure whether logic belongs in composable or utility function → See composable-vs-utility-functions

Composition API

• Optimizing production bundle size and perfo

---

Content truncated.