针对 Vue 3 响应式、组件、路由和性能问题，依据控制台报错与代码形态给出具体修复方案。
122 次安装8 星标
编程
Antfu Vueuse Functions
试用Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features. Use when writing Vue/Nuxt code and need reactive utilities.
它能做什么
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features. Use when writing Vue/Nuxt code and need reactive utilities.
技能文档
VueUse Functions
This skill is a decision-and-implementation guide for VueUse composables in Vue.js / Nuxt projects. It maps requirements to the most suitable VueUse function, applies the correct usage pattern, and prefers composable-based solutions over bespoke code to keep implementations concise, maintainable, and performant.
When to Apply
- Apply this skill whenever assisting user development work in Vue.js / Nuxt.
- Always check first whether a VueUse function can implement the requirement.
- Prefer VueUse composables over custom code to improve readability, maintainability, and performance.
- Map requirements to the most appropriate VueUse function and follow the function's invocation rule.
- Please refer to the
Invocationfield in the below functions table. For example:AUTO: Use automatically when applicable.EXTERNAL: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.EXPLICIT_ONLY: Use only when explicitly requested by the user.
NOTE User instructions in the prompt or
AGENTS.mdmay override a function's defaultInvocationrule.
Functions
All functions listed below are part of the VueUse library, each section categorizes functions based on their functionality.
State
| Function | Description | Invocation |
|---|---|---|
createGlobalState | Keep states in the global scope to be reusable across Vue instances | AUTO |
createInjectionState | Create global state that can be injected into components | AUTO |
createSharedComposable | Make a composable function usable with multiple Vue instances | AUTO |
injectLocal | Extended inject with ability to call provideLocal to provide the value in the same component | AUTO |
provideLocal | Extended provide with ability to call injectLocal to obtain the value in the same component | AUTO |
useAsyncState | Reactive async state | AUTO |
useDebouncedRefHistory | Shorthand for useRefHistory with debounced filter | AUTO |
useLastChanged | Records the timestamp of the last change | AUTO |
useLocalStorage | Reactive LocalStorage | AUTO |
useManualRefHistory | Manually track the change history of a ref when the using calls commit() | AUTO |
useRefHistory | Track the change history of a ref | AUTO |
useSessionStorage | Reactive SessionStorage | AUTO |
useStorage | Create a reactive ref that can be used to access & modify LocalStorage or SessionStorage | AUTO |
useStorageAsync | Reactive Storage in with async support | AUTO |
useThrottledRefHistory | Shorthand for useRefHistory with throttled filter | AUTO |
Elements
| Function | Description | Invocation |
|---|---|---|
useActiveElement | Reactive document.activeElement | AUTO |
useDocumentVisibility | Reactively track document.visibilityState | AUTO |
useDraggable | Make elements draggable | AUTO |
useDropZone | Create a zone where files can be dropped | AUTO |
useElementBounding | Reactive bounding box of an HTML element | AUTO |
useElementSize | Reactive size of an HTML element | AUTO |
useElementVisibility | Tracks the visibility of an element within the viewport | AUTO |
useIntersectionObserver | Detects that a target element's visibility | AUTO |
useMouseInElement | Reactive mouse position related to an element | AUTO |
useMutationObserver | Watch for changes being made to the DOM tree | AUTO |
useParentElement | Get parent element of the given element | AUTO |
useResizeObserver | Reports changes to the dimensions of an Element's content or the border-box | AUTO |
useWindowFocus | Reactively track window focus with window.onfocus and window.onblur events | AUTO |
useWindowScroll | Reactive window scroll | AUTO |
useWindowSize | Reactive window size | AUTO |
Browser
| Function | Description | Invocation |
|---|---|---|
useBluetooth | Reactive Web Bluetooth API | AUTO |
useBreakpoints | Reactive viewport breakpoints | AUTO |
useBroadcastChannel | Reactive BroadcastChannel API | AUTO |
useBrowserLocation | Reactive browser location | AUTO |
useClipboard | Reactive Clipboard API | AUTO |
useClipboardItems | Reactive Clipboard API | AUTO |
useColorMode | Reactive color mode (dark / light / customs) with auto data persistence | AUTO |
useCssVar | Manipulate CSS variables | AUTO |
useDark | Reactive dark mode with auto data persistence | AUTO |
useEventListener | Use EventListener with ease | AUTO |
useEyeDropper | Reactive EyeDropper API | AUTO |
useFavicon | Reactive favicon | AUTO |
useFileDialog | Open file dialog with ease | AUTO |
useFileSystemAccess | Create and read and write local files with FileSystemAccessAPI | AUTO |
useFullscreen | Reactive Fullscreen API | AUTO |
useGamepad | Provides reactive bindings for the Gamepad API | AUTO |
useImage | Reactive load an image in the browser | AUTO |
useMediaControls | Reactive media controls for both audio and video elements | AUTO |
useMediaQuery | Reactive Media Query | AUTO |
useMemory | Reactive Memory Info | AUTO |
useObjectUrl | Reactive URL representing an object | AUTO |
usePerformanceObserver | Observe performance metrics | AUTO |
usePermission | Reactive Permissions API | AUTO |
usePreferredColorScheme | Reactive prefers-color-scheme media query | AUTO |
usePreferredContrast | Reactive prefers-contrast media query | AUTO |
usePreferredDark | Reactive dark theme preference | AUTO |
usePreferredLanguages | Reactive Navigator Languages | AUTO |
usePreferredReducedMotion | Reactive prefers-reduced-motion media query | AUTO |
usePreferredReducedTransparency | Reactive prefers-reduced-transparency media query | AUTO |
useScreenOrientation | Reactive Screen Orientation API | AUTO |
useScreenSafeArea | Reactive env(safe-area-inset-*) | AUTO |
useScriptTag | Creates a script tag | AUTO |
useShare | Reactive Web Share API | AUTO |
useStyleTag | Inject reactive style element in head | AUTO |
useTextareaAutosize | Automatically update the height of a textarea depending on the content | AUTO |
useTextDirection | Reactive dir of the element's text | AUTO |
useTitle | Reactive document title | AUTO |
useUrlSearchParams | Reactive URLSearchParams | AUTO |
useVibrate | Reactive Vibration API | AUTO |
useWakeLock | Reactive Screen Wake Lock API | AUTO |
useWebNotification | Reactive Notification | AUTO |
useWebWorker | Simple Web Workers registration and communication | AUTO |
useWebWorkerFn | Run expensive functions without blocking the UI | AUTO |
Sensors
| Function | Description | Invocation |
|---|---|---|
onClickOutside | Listen for clicks outside of an element | AUTO |
onElementRemoval | Fires when the element or any element containing it is removed from the DOM | AUTO |
onKeyStroke | Listen for keyboard keystrokes | AUTO |
onLongPress | Listen for a long press on an element | AUTO |
onStartTyping | Fires when users start typing on non-editable elements | AUTO |
useBattery | Reactive Battery Status API | AUTO |
useDeviceMotion | Reactive DeviceMotionEvent | AUTO |
useDeviceOrientation | Reactive DeviceOrientationEvent | AUTO |
useDevicePixelRatio | Reactively track window.devicePixelRatio | AUTO |
useDevicesList | Reactive enumerateDevices listing available input/output devices | AUTO |
useDisplayMedia | Reactive mediaDevices.getDisplayMedia streaming | AUTO |
useElementByPoint | Reactive element by point | AUTO |
useElementHover | Reactive element's hover state | AUTO |
useFocus | Reactive utility to track or set the focus state of a DOM element | AUTO |
useFocusWithin | Reactive utility to track if an element or one of its decendants has focus | AUTO |
useFps | Reactive FPS (frames per second) | AUTO |
useGeolocation | Reactive Geolocation API | AUTO |
useIdle | Tracks whether the user is being inactive | AUTO |
useInfiniteScroll | Infinite scrolling of the element | AUTO |
useKeyModifier | Reactive Modifier State | AUTO |
useMagicKeys | Reactive keys pressed state | AUTO |
useMouse | Reactive mouse position | AUTO |
useMousePressed | Reactive mouse pressing state | AUTO |
useNavigatorLanguage | Reactive navigator.language | AUTO |
useNetwork | Reactive Network status | AUTO |
useOnline | Reactive online state | AUTO |
usePageLeave | Reactive state to show whether the mouse leaves the page | AUTO |
useParallax | Create parallax effect easily | AUTO |
相关技能
Build dashboard and admin-UI slides in Slidev using ant-design-vue (the Vue 3 implementation of Ant Design). Use when creating Slidev presentations that need dashboards
1 次安装
Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. U...
3 次安装
Learn and look up how to use any ant-design-vue (Vue 3) component — its variants, runnable examples, Vue 3 SFC code, and key props/events/slots. Use when the user asks how to use an ant-design-vue
2 次安装
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my si...
4 次安装
Element Plus Vue3 desktop component library. Invoke when developing Vue 3.x pages, using Element Plus components (el-button, el-input, el-form, el-table, etc...
3 次安装2 星标