VueUse 源码怎么读？

terry 1周前 (05-02) 阅读数 42 #Vue

文章标签源码

VueUse 是一套非常实用的 Vue 组合式函数库，对于想要深入了解 Vue 3 开发以及学习优秀代码实践的开发者来说，阅读其源码是很有价值的，那 VueUse 源码该怎么读呢？下面我们来详细探讨。

准备工作

你需要对 Vue 3 的组合式 API 有一定的了解。ref、reactive、computed、watch 等基本概念和用法，因为 VueUse 大量运用了这些组合式 API 来构建功能。

安装好 VueUse 库，可以通过 npm install @vueuse/core 来安装，找到其源码所在位置，一般是在项目的 node_modules/@vueuse/core 目录下（如果是通过包管理工具安装的话）。

从简单函数入手

VueUse 中有很多简单的工具函数，useMouse,我们可以先看这个函数。

### 1. 函数定义

打开 useMouse.ts 文件,会看到函数的定义大概是这样：

```typescript export function useMouse(target?: MaybeElementRef) { // 一些逻辑 } ```

这里的 target 是一个可选参数，类型是 MaybeElementRef，这是 VueUse 中自定义的类型，用于处理可能是 DOM 元素或者 ref 引用的情况。

### 2. 内部逻辑

进入函数内部，会看到使用了 Vue 的 ref 来创建响应式数据，const x = ref(0)，const y = ref(0) 来存储鼠标的坐标，然后通过 onMounted 生命周期钩子（如果是在组件中使用的话，这里因为是组合式函数，会处理在不同环境下的情况）来添加事件监听。

像这样：

```typescript onMounted(() => { // 获取目标元素 const el = getTargetElement(target) if (el) { el.addEventListener('mousemove', (e) => { x.value = e.pageX y.value = e.pageY }) } }) ```

这里的 getTargetElement 也是 VueUse 内部的一个工具函数，用于处理不同类型的 target 参数，将其转化为实际的 DOM 元素，通过看这些简单函数，我们可以熟悉 VueUse 中常用的一些模式，比如如何处理响应式数据，如何处理 DOM 操作（在浏览器环境下）,以及如何封装可复用的逻辑。

关注通用逻辑封装

VueUse 中有很多通用的逻辑封装，比如处理响应式数据的更新、处理不同环境（浏览器、Node.js 等）的兼容，以处理响应式数据更新为例,很多函数都会涉及到数据的变化和更新。

### 1. 响应式数据更新模式

在 useLocalStorage 函数中（用于在 localStorage 中存储响应式数据），当数据发生变化时，会更新 localStorage。

```typescript export function useLocalStorage( key: string, defaultValue: T, options: StorageOptions = {} ) { const storage = options.storage || localStorage const state = ref(defaultValue)

// 读取 localStorage 初始值 try { const value = storage.getItem(key) if (value) { state.value = JSON.parse(value) as T } } catch (error) { // 错误处理 }

// 监听数据变化，更新 localStorage watch(state, (val) => { try { storage.setItem(key, JSON.stringify(val)) } catch (error) { // 错误处理 } }, { deep: true })

return state }

<p>这里通过 <code>watch</code> 来监听 <code>state</code>（响应式数据）的变化，一旦变化就将数据存储到 localStorage 中，这种模式在很多涉及数据持久化或者与外部存储交互的函数中都会用到，通过阅读这类函数，我们可以学习到如何优雅地处理响应式数据与外部系统的交互。</p>
### 2. 环境兼容处理
<p>再比如 <code>useDeviceMotion</code> 函数，它要获取设备的运动数据（加速度等），但是这个 API 只有在浏览器环境下且设备支持时才可用，VueUse 中会进行这样的判断：</p>
```typescript
export function useDeviceMotion() {
  const isSupported = ref(false)
  const acceleration = ref<Acceleration | null>(null)
  // 其他相关数据...
  if (typeof window!== 'undefined' && 'DeviceMotionEvent' in window) {
    isSupported.value = true
    // 添加事件监听等逻辑
  }
  return {
    isSupported,
    acceleration,
    // 其他返回数据...
  }
}

通过先判断运行环境（这里判断是否是浏览器环境，并且是否存在 DeviceMotionEvent），来决定是否启用相应功能，这种环境兼容的处理方式在 VueUse 中很常见,对于我们开发跨环境的应用或者库很有借鉴意义。

学习类型定义

VueUse 的类型定义非常完善，这对于我们理解函数的输入输出以及内部逻辑也很有帮助，比如前面提到的 MaybeElementRef 类型：

它定义了一个参数可以是实际的 DOM 元素（Element、Document、Window 等），也可以是一个 ref 引用（Ref<MaybeElement>），还可以是 null 或者 undefined，通过看这些类型定义，我们能清楚函数对参数的要求,也能学习到如何定义灵活且严谨的类型。

再比如一些函数返回的是一个对象，对象中的属性类型也都有明确的定义，像 useDark 函数返回：

```typescript export interface UseDarkReturn { isDark: Ref toggle: () => void enable: () => void disable: () => void } ```

这样我们在使用这个函数时，就能清楚知道返回的对象有哪些属性和方法,以及它们的类型。