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，怎么做？
首先，初始化：
letabc=useLocalStorage('abc',[1,2,3]);// abc是一个Ref对象console.log(abc.value);// 一个Proxy
修改：
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会发生什么？
letabc=useLocalStorage('abc',[1,2,3]);letabc1=useLocalStorage('abc',[11,22,33]);
也是一样的道理，如果localStorage.abc本身有值，那么第一行不会重赋值，第二行依然是不会重赋值。
修改值的唯一办法是操作.value
现在我们知道，重复执行useLocalStorage并不能修改值，如果想要修改值，必须修改.value：
修改数组部分元素的方法：上面演示过，abc.value[1] = 22;。
重赋值数组的方法：abc.value = reactive([1,2,3])。
整理自己需要的工具
我建议你记录你用过的工具，以及简单用法。
作者：microkof
链接：https://www.jianshu.com/p/1186d062c07b
来源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。