VueUse文档个人翻译——核心方法一览

前言

为什么要用VueUse

VueUse是一款优秀的函数工具集，得到了Vue官方的认可

组合式 API 提供的逻辑复用能力孵化了一些非常棒的社区项目，比如 VueUse，一个不断成长的工具型组合式函数集合。
——Vue.js文档之为什么要有组合式 API？

另外，Element Plus也使用了VueUse，可见它是可靠的。
可惜的是，这玩应没有中文文档，而且它的文档还专门解释了短期内不会有翻译计划（🐮🍺）。
为了方便我自己和更多小伙伴使用这个工具，我将在这里持续更新VueUse的个人翻译。

翻译范围

本文将翻译VueUse的核心方法的简介一览，这可能比翻译每个方法的使用还更有价值，因为很多时候我们的时间是浪费在寻找我们想要的Function。
同时我会尽可能描述这些方法的使用场景、与原生方法的区别。
本文基于10.0.2版本（2023年4月14日发布），由于VueUse还在不断发展，如果有小伙伴发现我的内容已经过时，欢迎指出，我会尽快更新。​

类别

VueUse的核心方法（Core Function）分成12类，分别是：

  1. State - 状态，共13个
  2. Element - HTML元素，共15个
  3. Browser - 浏览器，共41个
  4. Sensors - 传感器（鼠标、键盘、电池、屏幕等），共37个
  5. Network - 网络，共3个
  6. Animation - 动画，共9个
  7. Component - 组件，共16个
  8. Watch - 监听，共13个
  9. Reactivity - 响应性，共20个
  10. Array - 数组，共13个
  11. Time - 时间，共2个
  12. Utilities - 工具类，共25

可以看到这些方法覆盖了日常开发的大部分场景，相信熟悉它们能大幅提升我们的开发效率。

State 状态

由于笔者使用Nuxt开发，对State需求较小，这部分将留到后面翻译（最近加班实在太多了）。

Elements 元素

HTML元素相关的方法。

  1. useActiveElement - 响应性的document.activeElement
    也就是在原生方法的基础上实现了响应性。

  2. useDocumentVisibility - 响应性的document.visibilityState
    可以用来监听浏览器窗口可见性的变化。

  3. useDraggable - 使元素可拖拽

  4. useDropZone - 创建一个区域，文件可以拖拽到这个区域中
    类似Element UI的Upload组件的效果。

  5. useElementBounding - 一个HTML元素的响应性的边界信息
    元素的大小及其相对于可视区域的位置。

  6. useElementSize - 一个HTML元素的响应性的长宽
    这个数据在上面useElementBounding中也有。

  7. useElementVisibility - 一个元素是否在可视区域（Viewport）内
    前面useDocumentVisibility是监听整个窗口是否可见；现在这个方法是监听一个HTML元素是否可见。

  8. useIntersectionObserver - 一个元素是否在一个区域的可视范围内
    它与useElementVisibility的区别是：它的区域可以是你自己设定的区域，例如一小块可以滚动的区域；而useElementVisibility的区域是整个浏览器的可视区域。

  9. useMouseInElement - 鼠标指针相对一个元素的位置（其实也返回鼠标在可视区域中的位置），响应性的

  10. useMutationObserver - 监听DOM树的变化
    虽然Vue有生命周期钩子可以用，但是这个方法可以具体监听到某个元素的渲染情况，粒度更细。

  11. 先去加班了…

Browser 浏览器

加完班就来…

V10.0更新说明

153次commits，41位贡献者，8个新方法