VueUse是什么
VueUse不是Vue.use，它是為Vue 2和3服務(wù)的一套Vue Composition API的常用工具集，是目前世界上Star最高的同類型庫之一。它的初衷就是將一切原本并不支持響應(yīng)式的JS API變得支持響應(yīng)式，省去程序員自己寫相關(guān)代碼。
我百度了一下VueUse，硬是沒人寫這方面的資料，大約是因?yàn)閂ue 3還沒有鋪開使用吧。今天我直接說說VueUse在Vue 3里的用法。（如果Vue 2想使用的話，需要安裝Vue Composition API插件。）
VueUse起源
這個(gè)項(xiàng)目很大程度啟發(fā)于react-use。Vue Compostion API支持了更好的邏輯分離，讓這些常用的工具可以被復(fù)用，能夠讓你快速地構(gòu)建豐富的應(yīng)用。
Vue 3的Composition API的一大特點(diǎn)是讓面向關(guān)注點(diǎn)，有了Composition API的加持，通用的工具集就很容易寫出來了。
官網(wǎng)
安裝
yarn add @vueuse/core
引入
首先說，它的某些工具挺“廢柴”，就像Lodash一樣，你并不需要使用它所有的工具，所以，按需引入即可。
import { useLocalStorage } from '@vueuse/core'
演示useStorage
我們現(xiàn)在看一個(gè)API，比如useStorage（https://vueuse.org/core/useStorage/），顧名思義，它的作用就是讓localStorage支持響應(yīng)式。
看過官網(wǎng)文檔，或許你依然不知道這個(gè)API怎么用，我來演示一下。
我想讓localStorage.abc = [1,2,3]，然后把第二項(xiàng)改成22，怎么做？
- 首先，初始化：
let abc = useLocalStorage('abc', [1,2,3]); // abc是一個(gè)Ref對象
console.log(abc.value); // 一個(gè)Proxy
- 修改：
abc.value[1] = 22;
注意看，我每次修改的都是abc變量，我根本沒有操作原生localStorage API，而且我操作的是數(shù)組，原生localStorage并不能直接操作數(shù)組。useLocalStorage會返回智能解析過的值，不再是字符串，而會是數(shù)組。
執(zhí)行之后，我們看看控制臺的Application的localStorage，里面是不是已經(jīng)有一個(gè)鍵叫abc，值是字符串[1,22,3]的記錄？
這樣我們就實(shí)現(xiàn)了原生localStorage API的響應(yīng)式，而且，我們始終可以將localStorage.abc視為數(shù)組，盡管它在原生JS里是字符串。
如果localStorage.abc本身存在，執(zhí)行useLocalStorage會發(fā)生什么？
如果localStorage.abc本身存在，那么執(zhí)行useLocalStorage并傳值，是無效的，得到的依然是localStorage.abc原本的值。
重復(fù)執(zhí)行useLocalStorage會發(fā)生什么？
let abc = useLocalStorage('abc', [1,2,3]);
let abc1 = useLocalStorage('abc', [11,22,33]);
也是一樣的道理，如果localStorage.abc本身有值，那么第一行不會重賦值，第二行依然是不會重賦值。
修改值的唯一辦法是操作.value
現(xiàn)在我們知道，重復(fù)執(zhí)行useLocalStorage并不能修改值，如果想要修改值，必須修改.value：
- 修改數(shù)組部分元素的方法：上面演示過，
abc.value[1] = 22;。 - 重賦值數(shù)組的方法：
abc.value = reactive([1,2,3])。
整理自己需要的工具
我建議你記錄你用過的工具，以及簡單用法。
