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的加持,通用的工具集就很容易写出来了。
官网
安装
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
,怎么做?
- 首先,初始化:
let abc = 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会发生什么?
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])
。
整理自己需要的工具
我建议你记录你用过的工具,以及简单用法。
网友评论