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 转换为字符串。map 和 set 在 stringify 之前将分别转换为 object 和 array。

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

配合computed或asyncComputed能达到自动更新的反应链模式

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>