美文网首页
VueUse是干什么的?

VueUse是干什么的?

作者: microkof | 来源:发表于2021-05-21 17:20 被阅读0次

    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
    
    1. 修改:
          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])

    整理自己需要的工具

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

    相关文章

      网友评论

          本文标题:VueUse是干什么的?

          本文链接:https://www.haomeiwen.com/subject/dyadkltx.html