current position:Home>VueUse library use and function name translation

VueUse library use and function name translation

2022-11-24 19:29:20tingkeiii

使用

npm i @vueuse/core

 

// 导入
import { useMouse, usePreferredDark, useLocalStorage } from "@vueuse/core"

export default {
  setup() {
    // tracks mouse position
    const { x, y } = useMouse()

    // is user prefers dark theme
    const isDark = usePreferredDark()

    // persist state in localStorage
    const store = useLocalStorage(
      "my-storage",
      {
        name: "Apple",
        color: "red",
      },
    )

    return { x, y, isDark, store }
  }
}

Translation of function names

核心功能

动画

功能/链接作用用例
useInterval每隔一段时间,Responsive counters increase【1】
useIntervalFn带有控件的 setInterval 的包装【2】
useNowResponsive current Data 实例【3】
useRafFn在每个requestAnimationFrame上调用函数【4】
useTimeoutUse a control to update a value after a given time【5】
useTimeoutFn带有控件的setTimeout的包装【6】
useTimestampReactive current timestamp【7】
useTransition值之间的转换【8】

浏览器

功能/链接作用用例
useActiveElement响应式 document.activeElement【9】
useBreakpoints响应式 viewport 断点【10】
useBrowserLocation响应式 浏览器位置【11】
useClipboard响应式 Clipboard(剪贴板) API【12】
useColorModeReactive with automatic data persistence 颜色模式 (dark / light / customs)【13】
useCssVar操纵CSS变量【14】
useDarkReactive with automatic data persistence dark 模式【15】
useEventListener轻松使用 EventListener(事件监听器)【16】
useEyeDropper响应式 EyeDropper API【17】
useFavicon响应式 图标【18】
useFetchReactive provides the ability to abort requests Fetch API【19】
useFullscreen响应式 Fullscreen(全屏) API【20】
useMediaControlsResponsive media controls for audio and video elements【21】
useMediaQuery响应式 Media Query【22】
useMemory响应式 Memory Info【23】
usePermission响应式 Permissions API【24】
usePreferredColorScheme响应式 prefers-color-scheme 媒体查询【25】
usePreferredDark响应式 dark priority subject【26】
usePreferredLanguages响应式 Navigator 语言【27】
useScreenSafeArea响应式 env(safe-area-inset-*)【28】
useScriptTag注入script标签【29】
useShare响应式 Web Share API【30】
useTitle响应式 document title【31】
useUrlSearchParams响应式 URLSearchParams【32】
useWakeLockwhen the application needs to continue running,Responsive screen wake lockAPIProvides a way to prevent the device from dimming or locking the screen【33】

组件

功能/链接作用用例
computedInject结合 computed 和 inject【34】
templateRef绑定 ref Shorthand for template elements【35】
tryOnBeforeUnmount安全的 onBeforeUnmount【36】
tryOnMounted安全的 onMounted【37】
tryOnScopeDispose安全的 onScopeDispose【38】
tryOnUnmounted安全的 onUnmounted【39】
unrefElementDOM元素 unref【40】
useMountedref 中的 mounted状态【41】
useTemplateRefsListrefs绑定到 v-for Shorthand for internal template elements and components【42】
useVirtualListEasily create virtual listings【43】
useVModelv-model 绑定的简写【44】
useVModelsprops v-model 绑定的简写【45】

格式器

功能/链接作用用例
useTimeAgo响应式的 time ago

Misc

功能/链接作用用例
useEventSource一个 EventSource 或 Server-Sent-Events 实例,打开到 HTTP 服务器的持久连接
useWebSocket响应式 WebSocket 客户端
useWebWorker简单的 Web Workers Sign up and communicate
useWebWorkerFnExecute additional functions without blocking the user interface

传感器

功能/链接作用用例
onClickOutsideListen for clicks outside the element
onKeyStrokeMonitors whether a keyboard key is pressed
onStartTypingFired when the user starts typing on a non-editable element
useBatteryResponsive battery status API
useDeviceMotion响应式 DeviceMotionEvent
useDeviceOrientation响应式 DeviceOrientationEvent
useDevicePixelRatioResponsive tracking window.devicePixelRatio
useDevicesList响应式 enumerateDevices Listen for available input and output devices
useDisplayMedia响应式 mediaDevices.getDisplayMedia streaming
useDocumentVisibilityTrack responsively document.visibilityState
useDraggable使元素可拖动*
useElementBounding一个HTML元素的 Responsive border boxes
useElementByPointPoint-based responsive elements
useElementHover响应式的 元素的 hover 状态
useElementSize一个 HTML 元素 的 响应式的 尺寸
useElementVisibility跟踪viewportVisibility of elements in
useFocusResponsive tools,Used to track or set one DOM The focus state of the element
useFocusWithinResponsive tools,Used to track whether an element or its descendants has focus
useFps响应式的 FPS (帧每秒)
useGeolocation响应式的 Geolocation(地理定位) API
useIdle跟踪用户是否处于非活动状态
useIntersectionObserverChecks the visibility of the target element
useKeyModifier响应式的 Modifier 状态
useMagicKeysResponsive key state
useMouseResponsive mouse position
useMouseInElementResponsive mouse position relative to an element
useMousePressedResponsive mouse press state
useMutationObserver监听对DOM树所做的更改
useNavigatorLanguageListen for user pairs navigator Changes in language preferences
useNetworkResponsive network status
useOnlineResponsive presence
usePageLeaveResponsive state to show if the mouse leaves the page
useParallaxEasily create parallax effects
usePointer响应式的 指针 状态
usePointerSwipe基于 PointerEvents 的,响应式的 滑动(swipe)检测
useResizeObserverReports changes in element content or border size
useScroll响应式的 Scroll position and state
useScrollLockLock the scrolling of the element
useSpeechRecognition响应式的 SpeechRecognition(语音识别)
useSpeechSynthesis响应式的 SpeechSynthesis(语音合成)
useSwipe基于 TouchEvents 的,响应式的 滑动(swipe)检测
useTextSelectionResponsively track based on Window.getSelectionUser text selection for
useUserMedia响应式的 mediaDevices.getUserMedia streaming
useWindowFocus使用 window.onfocus 和 window.onblur 事件,Track responsively window 焦点
useWindowScroll响应式的 window 滚动
useWindowSize响应式的 window 尺寸

状态

功能/链接作用用例
createGlobalStateKeep state in the global scope,in order to crossVue实例重用
createSharedComposableMake composable functions available to multipleVue实例
useLocalStorage响应式的 LocalStorage
useSessionStorage响应式的 SessionStorage
useStorage响应式的 LocalStorage/SessionStorage
useStorageAsyncReactive with asynchronous support Storage

实用工具

功能/链接作用用例
andrefs 的 AND 条件
orrefs 的 OR 条件
notrefs 的 NOT 条件
asyncComputed异步函数的computed
autoResetRefOne that will be set as the default after some event ref
biSyncRef双向 refs 同步
controlledComputed明确定义 computed 的深度
controlledRefrefand fine-grained control over its responsiveness
createEventHookutility for creating event hooks
createReactiveFnConvert simple functions to reactive函数
createUnrefFn创建一个普通函数,接受 ref 和 原始值作为参数
debouncedRef一个 ref 的 debounce(防抖) 更新
eagerComputedeager computed 没有 惰性计算(lazy evaluation)
extendRefRef添加额外属性
getref.value的简写
setref.value = x的简写
isDefined非 nullish 检查 Ref guard type
makeDestructurableMake both objects and arrays at the same time isomorphic destructurable
reactifyConvert simple functions to reactive函数
reactifyObject应用 reactifyto 一个对象
reactivePickreactively pick fields from a reactive object
refDefaultApply the default value to refs
syncRef保持目标refs与源refs同步
toReactiveref转换为reactive
toRefsObjects are also acceptedrefsof being extendedtoRefs
useAsyncQueueExecute each asynchronous task sequentially,And pass the current task result to the next task
useAsyncStateReactive asynchronous state
useBase64响应式的 base64 转换
useClampReactively sandwiches one value between two other values
useConfirmDialogCreate event hooks to support modals 和 confirmation dialogue chain
useCounterA basic counter with useful functions
useCycleListCycle through the list of items
useDebouncedRefHistoryshorthand for useRefHistorywith debounced filter
useEventBusA basic event bus
useLastChangedRecord the timestamp of the last change
useManualRefHistory当使用 using calls commit()时,手动跟踪 ref 的变更历史
useRefHistoryref 的变更历史
useThrottledRefHistoryuseRefHistorywith Shorthand for debounce filter
useDebounceFnDebounce executes a function
useDebounceDebounce performs oneref
throttledRefThrottle update oneref
useThrottleThrottling changes oneref
useThrottleFnThrottle execution of a function
useToggleA boolean switch with utility functions

Watch

功能/链接作用用例
debouncedWatch防抖watch
throttledWatch节流 watch
ignorableWatchignorable watch
pausableWatch可暂停的watch
untilTriggered only once promised watch
watchAtMostThe number of triggers watch
watchOnceTriggered only once watch
watchWithFilter带有额外的 EventFilter 控制的 watch
wheneverwatching 值 to be truthy的简写

copyright notice
author[tingkeiii],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/328/202211241926073155.html

Random recommended