Skip to main content

官方文档

yarn add @vueUse/core

获取激活元素

ActiveElement

ActiveElement

获取鼠标位置

useDraggable

获取鼠标位置

文件外部拖拽

DropZone

文件外部拖拽

动态获取元素尺寸

ElementBounding

动态获取元素尺寸

检测元素是否在视区

useElementVisibility

监测元素是否在视区

检测内容是否在视区

IntersectionObserver

检测内容是否在视区

屏幕捕获

帧率显示

useFps

image-20220804091654185

长列表

useInfiniteScroll

长列表

透视卡片效果

useParallax

透视卡片效果

一次性滑动

usePointerSwipe

一次性滑动

滚动监测

useScroll

滚动监测

滑块锁定

useScrollLock

滑块锁定

滑动解锁效果

useSwipe

滑动解锁效果

监听鼠标选择的内容

useTextSelection

监听鼠标选择的内容

for简写增删列表

useTemplateRefsList

for简写增删列表

虚拟列表

useVirtualList

虚拟列表

v-Model 简写

useVModel

props + emit -> ref

  • 原始写法

import { useVModel } from '@vueuse/core'

export default {
setup(props, { emit }) {
const data = useVModel(props, 'data', emit)

console.log(data.value) // props.data
data.value = 'foo' // emit('update:data', 'foo')
},
}
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'

const props = defineProps<{
modelValue: string
}>()
const emit = defineEmits(['update:modelValue'])

const data = useVModel(props, 'modelValue', emit)
</script>

v-model 简写2

useVModels

import { useVModels } from '@vueuse/core'

export default {
props: {
foo: String,
bar: Number,
},
setup(props, { emit }) {
const { foo, bar } = useVModels(props, emit)

console.log(foo.value) // props.foo
foo.value = 'foo' // emit('update:foo', 'foo')
},
}

数据监听器

watchArray

类似于watch,但向回调函数提供添加和删除的元素。如果使用,等{ deep: true }更新列表,则通过。push``splice

import { watchArray } from '@vueuse/core'

const list = ref([1, 2, 3])

watchArray(list, (newList, oldList, added, removed) => {
console.log(newList) // [1, 2, 3, 4]
console.log(oldList) // [1, 2, 3]
console.log(added) // [4]
console.log(removed) // []
})

onMounted(() => {
list.value = [...list.value, 4]
})

监听器暂停/启动开关

watchPausable

监听器暂停、启动开关

Base64

useBase64

如果您使用对象、数组、映射或集合,您可以在选项中提供序列化程序。否则,您的数据将被默认序列化程序序列化。对象和数组将由 JSON.stringify 转换为字符串。mapsetstringify 之前将分别转换为 objectarray

import { Ref, ref } from 'vue'
import { useBase64 } from '@vueuse/core'

const text = ref('')

const { base64 } = useBase64(text)

去抖

useDebounceFn

import { useDebounceFn } from '@vueuse/core'

const debouncedFn = useDebounceFn(() => {
// do something
}, 1000) // 1秒内所有请求讲合并成一次调用

document.addEventListener('resize', debouncedFn)

事件(event bus)

useEventBus

import { useEventBus } from '@vueuse/core'

const bus = useEventBus<string>('news')

const listener = (event: string) => {
console.log(`news: ${event}`)
}

// 创建一个事件
const unsubscribe = bus.on(listener)

// fire an event
// 触发事件
bus.emit('The Tokyo Olympics has begun')

// 移除所有事件
unsubscribe()
// 移除指定事件
bus.off(listener)

// 清空事件
bus.reset()

请求缓存(反应链)

useMemoize

import { useMemoize } from '@vueuse/core'

const getUser = useMemoize(
async (userId: number): Promise<UserData> =>
axios.get(`users/${userId}`).then(({ data }) => data),
)

const user1 = await getUser(1) // Request users/1
const user2 = await getUser(2) // Request users/2
// ...
const user1 = await getUser(1) // Retrieve from cache

// ...
const user1 = await getUser.load(1) // Request users/1

// ...
getUser.delete(1) // Delete cache from user 1
getUser.clear() // Clear full cache

配合computedasyncComputed能达到自动更新的反应链模式

const user1 = asyncComputed(() => getUser(1))
// ...
await getUser.load(1) // Will also update user1

组件

分页

useOffsetPagination

分页

多步骤表单

useStepper

多步骤表单

工具

事件钩子

createEventHook

  • 包装一个请求
import { createEventHook } from '@vueuse/core'

export function useMyFetch(url) {
const fetchResult = createEventHook<Response>()
const fetchError = createEventHook<any>()

fetch(url)
.then(result => fetchResult.trigger(result))
.catch(error => fetchError.trigger(error.message))

return {
onResult: fetchResult.on,
onError: fetchError.on,
}
}
  • 使用
<script setup lang="ts">
import { useMyFetch } from './my-fetch-function'

const { onResult, onError } = useMyFetch('my api url')

onResult((result) => {
console.log(result)
})

onError((error) => {
console.errr(error)
})
</script>