vueuse 轮子学习记录

vueuse –vue推出的工具箱

Elements dom元素

• useDocumentVisibility 监听当前页面显示隐藏，与小程序框架中onShow、onHide生命周期一样的功能

• usedraggable ：在页面上创建一个可移动的元素

• useIntersectionObserver 监听目标元素是否进入可视区，常用来做页面懒加载，返回一个stop函数，用来停止监听，第三个参数options 用来添加可控的配置

• useMouseInElement ：跟踪鼠标距离指定element的所有位置和是否进入元素的状态

• useMutationObserver：监听页面dom结构变化

• useWindowFocus：监听鼠标是否点击浏览器窗口以外位置

• useWindowScroll：获取纵横向滚动条滚动距离

• useWindowSize：监听浏览器当前宽高值

Browser 浏览器元素

• useBreakpoints：获取当前浏览器窗口当前在那个级别的 sm、md、lg、xl、2xl、3xl

• useBroadcastChannel：前端页面通信，类似封装postMessage

• useBrowserLocation：获取浏览器基本信息 host、origin、hostname这些

• useClipboard ：复制粘贴功能

• useEyeDropper：打开浏览器拾色器

• useEventListener：浏览器事件监听器，与原生的监听效果一直

• useImage：图片加载中提示，图片过大时图片位置提示loading，对用户相对友善

• useScreenOrientation：监听屏幕方向旋转

• useUrlSearchParams：格式化当前url参数，返回对象

Sensors 传感器类函数

• onClickOutside：监听鼠标是否点击被监听的dom元素外部，如果鼠标点击了元素外部触发回调函数，用来做点击弹窗关闭功能

• onLongPress：监听鼠标长按效果

• useBattery：监听充电状态

• useIdle：监听鼠标停止不同时间

• useInfiniteScroll：浏览器加载更多，当被监听的dom元素滚动条滚动到底部时，自动触发元素，也可以使用指令实现 v-infinite-scroll 这个更方便

• useKeyModifier：监听键盘CapsLock NumLck、Shift等特殊键唤醒状态

• useMagicKeys：监听键盘点击事件，返回被点击的键名

• useMouse：监听鼠标x，y位置数值

• useMousePressed：监听鼠标左右键按下，按下返回true

• useNetwork：监听返回当前网络使用情况

• useOnline：监听返回当前的联网状态

• usePageLeave：监听鼠标是否移出页面外

• useTextSelection：获取鼠标选中的内容，由上至下按顺序返回被选中的内容

• useWebSocket：发起一个WebSocket的连接

Component 计算

• useVModels：v-model的轮子api，节省原生v-model繁琐操作，此函数是监听多个

• useVModel：v-model的轮子api，节省原生v-model繁琐操作，此函数是监听单个

Watch 监听

• watchArray：监听数组

• watchOnce：监听一次

• watchThrottled：设置监听推迟时间，实现节流效果

Array 数组

• useArrayEvery：数组循环每一项，返回符合条件的结果 ，结果为ref类型

• useArrayFilter：数组筛选

• useArrayFind：数组查找，找到符合条件的立即返回

• useArrayFindIndex：数组查找，找到符合条件的立即返回索引值

• useArrayJoin：合并所有值成数组

• useArrayMap：数组遍历

• useArrayReduce：数组Reduce函数

• useArraySome：some每一项符合条件返回true

• useArrayUnique：数组去重

• useSorted：数组排序

Date 时间

• useDateFormat：时间格式化函数，返回指定格式时间值

Utilities

• set：set函数 与vue2$set功能一致

• useAsyncQueue：与promise all 一样的效果，按顺序执行传入的异步函数，所有执行完后再一起返回

• useBase64：转换成base64类型

• useCycleList：循环列表，返回当前值、next函数、prev函数

• useDebounceFn: 节流函数，也是延迟函数

• useToggle 来回切换函数

• useThrottleFn 节流阀，参数1接受一个函数，参数二为触发时间

• usePrevious 获取上一次输入的值

• useMemoize 缓存promise结果，当重复请求时，会知道从缓存中拿结果而不是重新获取

• useEventBus 事件bus

• useCycleList 循环列表，从指定列表中循环取值，按循序

• useCountrt 步进器 +1 +5 +2这种

• useBase64() 转换成base64的格式

• useAsyncQueue 类似promise.all()的功能

• toValue 与unref() 功能一致

• syncRefs 绑定两个值的值让其同步

• refThrottled 节流函数

• refDefault 设置ref默认值，看似无用实则无用

@Integrations 集成

• useChangeCase：转换字符串格式 小驼峰、大驼峰、带下火线、转成大写、转成小写等

• useCookies：vueuse cookie插件

• useFuse：前端实现模糊查询功能