VueUse是干什么的？

VueUse是什么

VueUse不是Vue.use，它是为Vue 2和3服务的一套Vue Composition API的常用工具集，是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式，省去程序员自己写相关代码。

我百度了一下VueUse，硬是没人写这方面的资料，大约是因为Vue 3还没有铺开使用吧。今天我直接说说VueUse在Vue 3里的用法。（如果Vue 2想使用的话，需要安装Vue Composition API插件。）

VueUse起源

这个项目很大程度启发于react-use。Vue Compostion API支持了更好的逻辑分离，让这些常用的工具可以被复用，能够让你快速地构建丰富的应用。

Vue 3的Composition API的一大特点是让面向关注点，有了Composition API的加持，通用的工具集就很容易写出来了。

官网

https://vueuse.org/guide.html

安装

yarn add @vueuse/core

引入

首先说，它的某些工具挺“废柴”，就像Lodash一样，你并不需要使用它所有的工具，所以，按需引入即可。

import { useLocalStorage } from '@vueuse/core'

演示useStorage

我们现在看一个API，比如useStorage（https://vueuse.org/core/useStorage/），顾名思义，它的作用就是让localStorage支持响应式。

看过官网文档，或许你依然不知道这个API怎么用，我来演示一下。

我想让localStorage.abc = [1,2,3]，然后把第二项改成22，怎么做？

1. 首先，初始化：

      let abc = useLocalStorage('abc', [1,2,3]); // abc是一个Ref对象
      console.log(abc.value); // 一个Proxy

2. 修改：

      abc.value[1] = 22;

注意看，我每次修改的都是abc变量，我根本没有操作原生localStorage API，而且我操作的是数组，原生localStorage并不能直接操作数组。useLocalStorage会返回智能解析过的值，不再是字符串，而会是数组。

执行之后，我们看看控制台的Application的localStorage，里面是不是已经有一个键叫abc，值是字符串[1,22,3]的记录？

这样我们就实现了原生localStorage API的响应式，而且，我们始终可以将localStorage.abc视为数组，尽管它在原生JS里是字符串。

如果localStorage.abc本身存在，执行useLocalStorage会发生什么？

如果localStorage.abc本身存在，那么执行useLocalStorage并传值，是无效的，得到的依然是localStorage.abc原本的值。

重复执行useLocalStorage会发生什么？

let abc = useLocalStorage('abc', [1,2,3]);
let abc1 = useLocalStorage('abc', [11,22,33]);

也是一样的道理，如果localStorage.abc本身有值，那么第一行不会重赋值，第二行依然是不会重赋值。

修改值的唯一办法是操作.value

现在我们知道，重复执行useLocalStorage并不能修改值，如果想要修改值，必须修改.value：

• 修改数组部分元素的方法：上面演示过，abc.value[1] = 22;。
• 重赋值数组的方法：abc.value = reactive([1,2,3])。

整理自己需要的工具

我建议你记录你用过的工具，以及简单用法。