vueuse 中文文档

VueUse是一个基于Composition API的实用函数集合，它的功能丰富有200+功能，无缝迁移适用于Vue3和Vue2.7版本之后同时支持tree shaking，中文文档由itxst翻译，并匹配了对应的demo例子，从VueUse 4.0版本开始，通过vue-demi实现了一个包同时支持 Vue 2 和 Vue 3 。

官方网站

https://vueuse.org/

VueUse 安装

npm i @vueuse/core

VueUse CDN

<script src="https://www.itxst.com/package/vueuse/shared/index.iife.min.js"></script>
<script src="https://www.itxst.com/package/vueuse/core/index.iife.min.js"></script>

Vue 入门例子

<template>
  <div>
   x= {{ x }}  ,  y= {{ y }}
  </div>
</template>
<script setup lang="ts">
/*
 vueuse 中文文档 vue3 setup模式
 https://www.itxst.com/tiptap/tutorial.html
*/
import { computed, onMounted, reactive } from 'vue';
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'
 
const { x, y } = useMouse();

onMounted(() => {
 
});

</script>
<style scoped lang="scss">
</style>

Vue UMD例子

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>vueuse 入门例子</title>
 <script src="https://www.itxst.com/package/vue3/vue.global.js"></script>
 <script src="https://www.itxst.com/package/vueuse/shared/index.iife.min.js"></script>
 <script src="https://www.itxst.com/package/vueuse/core/index.iife.min.js"></script>
</head>
<body style="padding:10px;">
    <div id="app" >
      x= {{point.x}},  y= {{point.y}}
    </div>
    <script>
        const app = {
            data() {
                return {
                 point: VueUse.useMouse() 
                }
            }, 
            methods: {
                
            }
        }
        Vue.createApp(app).mount('#app')
    </script>
    <style>
    </style>
</body>
</html>

在线试一试

VueUse 配置

Event Filters
从v4.0开始，VueUse提供了Event Filters系统，可以灵活地控制何时触发事件。比如你可以使用 throttleFilter和 debounceffilter来控制事件触发率:

import { debounceFilter, throttleFilter, useLocalStorage, useMouse } from '@vueuse/core'

//写入本地存储的制阈值1秒
const storage = useLocalStorage('my-key', { foo: 'bar' }, { eventFilter: throttleFilter(1000) })
//每100ms更新鼠标位置
const { x, y } = useMouse({ eventFilter: debounceFilter(100) })

另外，你还可以使用pausableFilter暂时暂停一些事件。

import { pausableFilter, useDeviceMotion } from '@vueuse/core'

const motionControl = pausableFilter()
const motion = useDeviceMotion({ eventFilter: motionControl.eventFilter })
//暂停事件
motionControl.pause()
//恢复事件
motionControl.resume()

Reactive Timing
在可能的情况下，VueUse的函数遵循Vue的反应性系统默认的刷新时间,与watch一样，veuse允许您通过传递flush选项来配置时间:。

const { pause, resume } = pausableWatch(
  () => {
    // Safely access updated DOM
  },
  { flush: 'post' },
)

flush 选项

pre 在渲染前刷新
post 在组件更新后触发，这样你可以访问更新后的DOM
sync 强制刷新。同步触发

全局依赖项
从v4.0版本开始，将提供一个选项访问浏览器的函数，供你指定全局依赖项(例如window, document和navigator)。在默认情况下，它将使用全局实例，这在使用iframe和测试环境时非常有用。

// 访问父框架的上下文
const parentMousePos = useMouse({ window: window.parent })

const iframe = document.querySelect('#my-iframe')

// 访问子框架的上下文
const childMousePos = useMouse({ window: iframe.contentWindow })

// testing
const mockWindow = { /* ... */ }

const { x, y } = useMouse({ window: mockWindow })

无渲染组件

在vueuse 5.0版本开始，引入了一个新的包 @vueuse/components，它提供了组合式函数的无渲染组件（就是不会渲染UI元素的组件）。

//安装无渲染组件
$ npm i @vueuse/core @vueuse/components

以前我们这样使用onClickOutside

<script setup>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

const dom = ref()

function close () {
  /* ... */
}
onClickOutside(dom, close)
</script>
<template>
  <div ref="dom">
    Click Outside of Me
  </div>
</template>

现在，我们可以使用自动绑定的无渲染组件

<script setup>
import { OnClickOutside } from '@vueuse/components'

function close () {
  /* ... */
}
</script>
<template>
  <OnClickOutside @trigger="close">
    <div>
      Click Outside of Me
    </div>
  </OnClickOutside>
</template>

返回值

<UseMouse v-slot="{ x, y }">
  x: {{ x }}
  y: {{ y }}
</UseMouse>
<UseDark v-slot="{ isDark, toggleDark }">
  <button @click="toggleDark()">
    Is Dark: {{ isDark }}
  </button>
</UseDark>