# 本文简介 **点赞 + 关注 + 收藏 = 学会了**
> 狠话放在前，如果你工作中用到 `Vue` ，求求你试一下 `VueUse` 吧～
[`VueUse`](https://vueuse.org/) 是专门为 `Vue` 打造的工具库，它提供了监听页面元素的各种行为、调用浏览器提供的蓝牙、定位、摄像头、连接游戏手柄等能力，适用于 `Vue2` 和 `Vue3`。
本文挑了几个 `VueUse` 里 `Elements` 的功能来玩，使用 `Vue3` 进行讲解。

# 安装 VueUse 使用以下命令可以将 `VueUse` 安装到你项目里。 npm i @vueuse/core
安装完，需要使用哪个工具就引入哪个工具。 ```js import { useMouse } from '@vueuse/core' const { x, y } = useMouse() ```

# 使用 Elements 模块的提供的工具
## 监听当前激活的元素 useActiveElement 使用 [`useActiveElement`](https://vueuse.org/core/useActiveElement/) 可以监听当前激活的元素，比如选中的按钮、点击了输入框，这些操作都可以被监听到。 [官网给出的Demo：](https://github.com/vueuse/vueuse/blob/main/packages/core/useActiveElement/demo.vue) ![01.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bdde5087abed42f282e6ea226829b237~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1476&h=584&s=222381&e=gif&f=103&b=fbfbfb)
我稍微简化了一下代码，使用了一个输入框和一个按钮来讲解。要监听当前激活的元素需要做以下几步： 1. 引入 `useActiveElement` 2. 使用 `useActiveElement` 就这么简单😂 ![02.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41a3067e5b3d4e51bbc34d4fa43a32e9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1456&h=432&s=180297&e=gif&f=75&b=fcfcfc) ```html ``` 这里使用了 `watch` 监听 `activeElement` 的变化。可以打开控制台看看监听的结果。在 `HTML` 元素上添加了 `data-myid` 属性，这中写法是 `HTML5` 新增的，`data-*` 可以自定义元素的属性。我们可以在js里通过元素的 `dataset` 查看元素的自定义属性： ```js // 省略部分代码 watch(activeElement, (el) => { console.log(el.dataset) }) ``` ![03.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a87987d4774142f5a086bde48389dcbd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1332&h=514&s=76462&e=png&b=fefefe)
当了解了 `useActiveElement` 的用法后，可以去看看[**官网的例子**](https://github.com/vueuse/vueuse/blob/main/packages/core/useActiveElement/demo.vue)。

## 监听页面是否可见 useDocumentVisibility 使用 [`useDocumentVisibility`](https://vueuse.org/core/useDocumentVisibility/) 可以监听页面是否可见。它可以监听浏览器最小化、浏览器标签页切换。 ![04.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20c1594f7800477babd1185fed802e02~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1136&h=748&s=292977&e=gif&f=51&b=ffffff) 比如切换到别的标签页，控制台就会输出 `hidden`，切换回来就会输出 `visible`。 `useDocumentVisibility` 的用法很简单，引入 -> 使用 ```html ``` 我使用 `watch` 监听 `visibility` 的变化。你可以根据 `visibility` 的值去实现你的功能。
在 `JS` 里的 `document` 翻译成“页面”或许不太正确，叫“文档对象”比较恰当。但使用“文档对象”来讲解觉得怪怪的。大家能知道我想表达的内容就好～

## 监听页面是否聚焦 useWindowFocus 使用 [`useWindowFocus`](https://vueuse.org/core/useWindowFocus/) 可以监听页面是否聚焦。和前面提到的 `useDocumentVisibility` 不同，`useDocumentVisibility` 是监听页面是否在屏幕上展示，就算切换了窗口，只要浏览器有一丁点位置在屏幕上展示的话，`useDocumentVisibility` 都会返回 `visible`。而 `useWindowFocus` 的能力可以粗暴的理解为 `useDocumentVisibility` 升级版。 `useWindowFocus` 可以监听当前焦点是否在页面上。 ![05.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cdb96f7307c040a9b43c06f62623e7d2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=740&h=384&s=71910&e=png&b=fefefe) 比如，当我鼠标点击到红色区域（浏览器页面区域）时，`useWindowFocus` 会返回 `true` 。如果点击其他区域（比如蓝色区域或者点击桌面），`useWindowFocus` 会返回 `false` 。
`useWindowFocus` 的用法很简单，也是 **引入 -> 使用** ```html ```

## 监听鼠标是否悬停在指定元素外 useMouseInElement [`useMouseInElement`](https://vueuse.org/core/useMouseInElement/) 其实是监听鼠标和指定元素的参数变化。因为前面讲解的内容偏向于页面可见、聚焦方面，而 `useMouseInElement` 可以监听鼠标有没有悬停在指定元素上。看上去和前面的章节有一点点联系吧，所以这节就起了这个标题。 ![06.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe8b69d0c2634a76b25b4191bce1f3b0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=892&h=432&s=94078&e=gif&f=60&b=ffffff) 首先需要引入 `useMouseInElement` ，在使用时传入目标元素。上代码 ```html ```
`useMouseInElement` 除了可以监听鼠标是否悬停在元素上，还提供了其他功能。打开[官方文档](https://vueuse.org/core/useMouseInElement/#demo) 可以看到支持的功能。 ![07.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc3f887dbe694b68bdca892378d5129f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1248&h=814&s=86930&e=png&b=fbfbfb) 属性都比较简单，可以自己输出所有属性看看哪些用得上的。监听元素位置、监听元素大小这些功能也很常用。 ```js // 省略部分代码 const mouseInElementObj = useMouseInElement(target) console.log(mouseInElementObj) ```

## 监听元素可见性 useElementVisibility 使用 [`useElementVisibility`](https://vueuse.org/core/useElementVisibility/) 可以监听元素的可见性。它能监听元素： * CSS的 `display` 是否为 `none`； * 元素是否在当前窗口（有滚动条的情况下，元素可能会出现在窗口外）。
![08.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b0b17825939411ea37c1948948bd972~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=680&h=728&s=347755&e=gif&f=149&b=fefefe) ```html ```
**需要注意：** * `targetIsVisible` 无法监听 `v-if`。 * 使用 `visibility: hidden;` 、`opacity: 0;` 这些样式也无法监听。

## 监听元素宽高变化 useElementSize 使用 `useElementSize` 可以监听指定元素的宽高变化。只要给 `useElementSize` 传入要监听的元素对象，它就会返回一个包含 `width` 和 `height` 的对象给我们。 ![09.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39b69e674314484da5356219e5f6e4b4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=558&h=320&s=337709&e=gif&f=98&b=fdfdfd) ```html

雷猴

雷猴