vue-best-practices
36
总安装量
36
周安装量
#5680
全站排名
安装命令
npx skills add https://github.com/uni-helper/skills --skill vue-best-practices
Agent 安装分布
codex
30
opencode
29
gemini-cli
28
amp
26
github-copilot
26
kimi-cli
26
Skill 文档
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
- Tracing unexpected re-renders and state updates â See reactivity-debugging-hooks
- 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
- Async operations overwriting with stale data â See watch-async-cleanup
- Creating watchers inside async callbacks â See watch-async-creation-memory-leak
- 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
- Parent can’t access child ref data in script setup â See component-ref-requires-defineexpose
- Child component throws “component not found” error â See local-components-not-in-descendants
- Click listener doesn’t fire on custom component â See click-events-on-components
- HTML template parsing breaks Vue component syntax â See in-dom-template-parsing-caveats
- Grandparent can’t listen to grandchild emitted events â See component-events-dont-bubble
- Wrong component renders due to naming collisions â See component-naming-conflicts
- Distinguishing Vue components from native elements â See component-naming-pascalcase
- Parent styles don’t apply to multi-root component â See multi-root-component-class-attrs
- 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
- Variables referenced in defineProps cause errors â See prop-defineprops-scope-limitation
- Destructured props not updating watchers â See prop-destructured-watch-getter
- Prop validation needs component instance data â See prop-validation-before-instance
- Component emits undeclared event causing warnings â See declare-emits-for-documentation
- defineEmits used inside function or conditional â See defineEmits-must-be-top-level
- defineEmits has both type and runtime arguments â See defineEmits-no-runtime-and-type-mixed
- 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
- Native event listeners not responding to clicks â See native-event-collision-with-emits
- Component event fires twice when clicking â See undeclared-emits-double-firing
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
- List items disappearing or swapping state unexpectedly â See v-for-key-attribute
- Getting template compilation errors with statements â See template-expressions-restrictions
- Dynamic directive arguments not working properly â See dynamic-argument-constraints
- Functions in templates modifying data unexpectedly â See template-functions-no-side-effects
- v-else elements rendering unconditionally always â See v-else-must-follow-v-if
- Child components in loops showing undefined data â See v-for-component-props
- Array order changing after sorting or reversing â See v-for-computed-reverse-sort
- Getting off-by-one errors with range iteration â See v-for-range-starts-at-one
- Performance issues with filtered or sorted lists â See v-for-use-computed-for-filtering
- “Cannot read property of undefined” runtime errors â See v-if-null-check-order
- Deciding between v-if and v-show for conditionals â See v-if-vs-v-show-performance
- v-show or v-else not working on template elements â See v-show-template-limitation
Template Refs
- Ref becomes null when element is conditionally hidden â See template-ref-null-with-v-if
- Ref array indices don’t match data array in loops â See template-ref-v-for-order
- Refactoring template ref names breaks silently in code â See use-template-ref-vue35
Forms & v-model
- Initial form values not showing when using v-model â See v-model-ignores-html-attributes
- Textarea content changes not updating the ref â See textarea-no-interpolation
- iOS users cannot select dropdown first option â See select-initial-value-ios-bug
- Parent and child components have different values â See define-model-default-value-sync
- Need to handle v-model modifiers in child â See definemodel-hidden-modifier-props
- Object property changes not syncing to parent â See definemodel-object-mutation-no-emit
- Need to use updated value immediately after change â See definemodel-value-next-tick
- Real-time search/validation broken for Chinese/Japanese input â See v-model-ime-composition
- Number input returns empty string instead of zero â See v-model-number-modifier-behavior
- Migrating Vue 2 components to Vue 3 â See v-model-vue3-breaking-changes
- Custom checkbox values not submitted in forms â See checkbox-true-false-value-form-submission
Events & Modifiers
- Chaining multiple event modifiers produces unexpected results â See event-modifier-order-matters
- 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
- Keyboard shortcuts don’t fire with system modifier keys â See keyup-modifier-timing
- 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
- DOM access fails before component mounts â See lifecycle-dom-access-timing
- Memory leaks from unremoved event listeners â See cleanup-side-effects
- SSR rendering differs from client hydration â See lifecycle-ssr-awareness
- Expensive operations slow performance drastically â See updated-hook-performance
- DOM reads return stale values after state changes â See dom-update-timing-nexttick
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
- Wrapper components breaking child slot functionality â See slot-forwarding-to-child-components
- 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
- Injected values not updating when provider changes â See provide-inject-reactivity-not-automatic
- Calling provide after async operations fails silently â See provide-inject-synchronous-setup
- String keys collide in large applications â See provide-inject-symbol-keys
- Tracing where provided values come from â See provide-inject-debugging-challenges
- Multiple components share same default object â See provide-inject-default-value-factory
- 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
- Both internal and fallthrough event handlers execute â See attrs-event-listener-merging
- Accessing hyphenated attributes in JavaScript code â See attrs-hyphenated-property-access
- Watching fallthrough attributes for changes with watch() â See attrs-not-reactive
- Explicit attributes overwritten by fallthrough values â See fallthrough-attrs-overwrite-vue3
- Attributes applying to wrong element in wrappers â See inheritattrs-false-for-wrapper-components
Composables
- Composable has unexpected side effects affecting external state â See composable-avoid-hidden-side-effects
- Composable called outside setup context or asynchronously â See composable-call-location-restrictions
- 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
- Composable reactive dependency not updating when input changes â See composable-tovalue-inside-watcheffect
- Unsure whether logic belongs in composable or utility function â See composable-vs-utility-functions
Composition API
- Optimizing production bundle size and performance â See composition-api-bundle-size-minification
- Composition API code becoming scattered and hard to maintain â See composition-api-code-organization
- Fixing naming conflicts and unclear data origins in mixins â See composition-api-mixins-replacement
- Applying functional patterns incorrectly to Vue state â See composition-api-not-functional-programming
- Gradually migrating large Options API codebase â See composition-api-options-api-coexistence
- Lifecycle hooks failing silently after async operations â See composition-api-script-setup-async-context
- Coming from React, over-engineering Vue patterns unnecessarily â See composition-api-vs-react-hooks-differences
- Parent component refs unable to access exposed properties â See define-expose-before-await
Directives
- Storing state across directive hooks â See directive-arguments-read-only
- Applying custom directives to Vue components â See directive-avoid-on-components
- Creating intervals or event listeners in directives â See directive-cleanup-in-unmounted
- Simplifying directives with identical behavior â See directive-function-shorthand
- Using custom directives in script setup â See directive-naming-v-prefix
- Choosing between custom and built-in directives â See directive-prefer-declarative-templating
- Deciding between directives and components â See directive-vs-component-decision
- Migrating Vue 2 directives to Vue 3 â See directive-vue2-migration-hooks
Transitions
- Wrapping multiple elements or components in transitions â See transition-single-element-slot
- Transitioning between same element types without animation â See transition-key-for-same-element
- Using JavaScript animations without calling done callback â See transition-js-hooks-done-callback
- Animating lists with TransitionGroup without unique keys â See transition-group-key-requirement
- Performance problems with janky list animations â See transition-animate-transform-opacity
- Move animations failing on inline list elements â See transition-group-flip-inline-elements
- List items jumping instead of smoothly animating â See transition-group-move-animation-position-absolute
- Vue 2 to Vue 3 transition layout breaks unexpectedly â See transition-group-no-default-wrapper-vue3
- Trying to sequence list animations with mode prop â See transition-group-no-mode-prop
- Creating cascading delays for list item animations â See transition-group-staggered-animations
- Overlapping elements or layout jumping during transitions â See transition-mode-out-in
- Nested transition animations cutting off prematurely â See transition-nested-duration
- Reusable transition components with scoped styles breaking â See transition-reusable-scoped-style
- RouterView transitions unexpectedly animating on page load â See transition-router-view-appear
- Mixing CSS transitions and animations causing timing issues â See transition-type-when-mixed
- Component cleanup not firing during fast transition replacements â See transition-unmount-hook-timing
Animation
- Need to animate elements staying in DOM â See animation-class-based-technique
- Animations not triggering on content changes â See animation-key-for-rerender
- Building interactive animations with user input â See animation-state-driven-technique
- Animating list changes causing noticeable lag â See animation-transitiongroup-performance
KeepAlive
- Using KeepAlive without proper cache limits or cleanup â See keepalive-memory-management
- KeepAlive include/exclude props not matching cached components â See keepalive-component-name-requirement
- Need to programmatically remove component from KeepAlive cache â See keepalive-no-cache-removal-vue3
- Users see stale cached content when expecting fresh page data â See keepalive-router-fresh-vs-cached
- Child components mount twice with nested Vue Router routes â See keepalive-router-nested-double-mount
- Memory grows when combining KeepAlive with Transition animations â See keepalive-transition-memory-leak
- Dynamic component state resets when switching between them â See dynamic-components-with-keepalive
Async Components
- Setting up Vue Router route component loading â See async-component-vue-router
- Async component options ignored by parent Suspense â See async-component-suspense-control
- Network failures or timeouts loading components â See async-component-error-handling
- Improving Time to Interactive with SSR apps â See async-component-hydration-strategies
- Template refs undefined after component reactivation â See async-component-keepalive-ref-issue
- Loading spinner flashing on fast networks â See async-component-loading-delay
Render Functions
- Render function from setup doesn’t update reactively â See rendering-render-function-return-from-setup
- Same vnode appearing multiple times in tree â See render-function-vnodes-must-be-unique
- Rendering lists in render functions without keys â See render-function-v-for-keys-required
- Implementing .stop, .prevent in render functions â See render-function-event-modifiers
- Two-way binding on components in render functions â See render-function-v-model-implementation
- Using string names for components in render functions â See rendering-resolve-component-for-string-names
- Accessing vnode internals like el or shapeFlag â See render-function-avoid-internal-vnode-properties
- Creating simple stateless presentational components â See render-function-functional-components
- Applying custom directives in render functions â See render-function-custom-directives
- Excessive rerenders from watchers or deep watchers â See rendering-excessive-rerenders-watch-vs-computed
- Choosing render functions over templates â See rendering-prefer-templates-over-render-functions
- Migrating Vue 2 render functions to Vue 3 â See rendering-render-function-h-import-vue3
- Passing slot content to h() incorrectly â See rendering-render-function-slots-as-functions
- Understanding Vue’s vdom optimization blocks â See rendering-understand-vdom-block-structure
Teleport
- Teleport target element not found in DOM â See teleport-target-must-exist
- Teleported content breaks SSR hydration â See teleport-ssr-hydration
- Modal breaks with parent CSS transforms â See teleport-css-positioning-issues
- Content needs different layout on mobile â See teleport-disabled-for-responsive
- Unsure if props/events work through teleport â See teleport-logical-hierarchy-preserved
- Multiple modals targeting same container â See teleport-multiple-to-same-target
- Scoped styles not applying to teleported content â See teleport-scoped-styles-limitation
Suspense
- Need to handle async errors from Suspense components â See suspense-no-builtin-error-handling
- Want to track Suspense loading states programmatically â See suspense-events-for-state-tracking
- Planning Suspense usage in production applications â See suspense-experimental-api-stability
- Fallback not showing when content changes â See suspense-fallback-not-immediate-on-revert
- Nesting Suspense components together â See suspense-nested-suspensible-prop
- Combining Suspense with Router, Transition, KeepAlive â See suspense-nesting-order-with-router
- Nested async component not showing loading indicator â See suspense-revert-only-on-root-change
- Multiple async components in single Suspense â See suspense-single-child-requirement
- Using Suspense with server-side rendering â See suspense-ssr-hydration-issues
TypeScript
- Declaring props with TypeScript in composition API components â See ts-defineprops-type-based-declaration
- Providing default values to mutable prop types â See ts-withdefaults-mutable-factory-function
- Typing reactive state with ref unwrapping concerns â See ts-reactive-no-generic-argument
- Accessing DOM elements after component mounts â See ts-template-ref-null-handling
- Typing refs to child Vue components â See ts-component-ref-typeof-instancetype
- Using custom directives with TypeScript support â See ts-custom-directive-type-augmentation
- Declaring component events with full type safety â See ts-defineemits-type-based-syntax
- Handling optional boolean props in TypeScript â See ts-defineprops-boolean-default-false
- Using imported types safely in defineProps â See ts-defineprops-imported-types-limitations
- Handling DOM events with strict TypeScript checking â See ts-event-handler-explicit-typing
- Sharing data between components with type safety â See ts-provide-inject-injection-key
- Storing Vue components in reactive state â See ts-shallowref-for-dynamic-components
- Working with union types in Vue templates â See ts-template-type-casting
SSR
- User data leaking between server requests â See state-ssr-cross-request-pollution
- HTML differs between server and client renders â See ssr-hydration-mismatch-causes
- Code runs on both server and browser environments â See ssr-platform-specific-apis
- Custom directives not displaying on server-rendered HTML â See ssr-custom-directive-getssrprops
Performance
- Many list items re-rendering unnecessarily during state changes â See perf-props-stability-update-optimization
- Rendering hundreds or thousands of items causing DOM performance issues â See perf-virtualize-large-lists
- Static content re-evaluated on every parent component update â See perf-v-once-v-memo-directives
- List performance degrading from deeply nested component structure â See perf-avoid-component-abstraction-in-lists
- Computed properties returning objects triggering effects unexpectedly â See perf-computed-object-stability
- Page load metrics suffering from client-side JavaScript execution delay â See perf-ssr-ssg-for-page-load
SFC (Single File Components)
- Trying to use named exports from component script blocks â See sfc-named-exports-forbidden
- Starting a Vue project with a build setup â See sfc-recommended-for-build-projects
- Styling child component elements with scoped CSS â See sfc-scoped-css-child-component-styling
- Styling content added dynamically with v-html â See sfc-scoped-css-dynamic-content
- Optimizing scoped CSS selector performance â See sfc-scoped-css-performance
- Styling content passed through component slots â See sfc-scoped-css-slot-content
- Variables not updating in template after changes â See sfc-script-setup-reactivity
- Organizing component template, logic, and styles â See sfc-separation-of-concerns-colocate
- Binding inline styles with property names â See style-binding-camelcase
- Building Tailwind classes with string concatenation â See tailwind-dynamic-class-generation
Plugins
- Debugging why global properties cause naming conflicts â See plugin-global-properties-sparingly
- Plugin not working or inject returns undefined â See plugin-install-before-mount
- Global properties not available in setup function â See plugin-prefer-provide-inject-over-global-properties
- Creating a new Vue plugin from scratch â See plugin-structure-install-method
- Preventing collisions between multiple plugins â See plugin-symbol-injection-keys
- Global properties missing TypeScript autocomplete support â See plugin-typescript-type-augmentation
App Configuration
- App configuration methods not working after mount call â See configure-app-before-mount
- Need to chain app configuration methods after mount â See mount-return-value
- Vue only controlling specific page sections â See multiple-app-instances
- Migrating dynamic component registration to Vite â See dynamic-component-registration-vite