VueUse是什么
VueUse不是Vue.use芯侥，它是為Vue 2和3服務(wù)的一套Vue Composition API的常用工具集，是目前世界上Star最高的同類型庫之一乳讥。它的初衷就是將一切原本并不支持響應(yīng)式的JS API變得支持響應(yīng)式柱查，省去程序員自己寫相關(guān)代碼。
我百度了一下VueUse云石，硬是沒人寫這方面的資料唉工，大約是因為Vue 3還沒有鋪開使用吧。今天我直接說說VueUse在Vue 3里的用法汹忠。（如果Vue 2想使用的話淋硝，需要安裝Vue Composition API插件。）
VueUse起源
這個項目很大程度啟發(fā)于react-use宽菜。Vue Compostion API支持了更好的邏輯分離谣膳，讓這些常用的工具可以被復(fù)用，能夠讓你快速地構(gòu)建豐富的應(yīng)用铅乡。
Vue 3的Composition API的一大特點是讓面向關(guān)注點继谚，有了Composition API的加持，通用的工具集就很容易寫出來了阵幸。
官網(wǎng)
安裝
yarn add @vueuse/core
引入
首先說花履，它的某些工具挺“廢柴”，就像Lodash一樣挚赊，你并不需要使用它所有的工具诡壁，所以，按需引入即可咬腕。
import { useLocalStorage } from '@vueuse/core'
演示useStorage
我們現(xiàn)在看一個API欢峰，比如useStorage（https://vueuse.org/core/useStorage/），顧名思義，它的作用就是讓localStorage支持響應(yīng)式纽帖。
看過官網(wǎng)文檔宠漩，或許你依然不知道這個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盼铁，而且我操作的是數(shù)組，原生localStorage并不能直接操作數(shù)組尝偎。useLocalStorage會返回智能解析過的值饶火，不再是字符串，而會是數(shù)組致扯。
執(zhí)行之后肤寝，我們看看控制臺的Application的localStorage，里面是不是已經(jīng)有一個鍵叫abc抖僵，值是字符串[1,22,3]的記錄鲤看？
這樣我們就實現(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])凌那。
整理自己需要的工具
我建議你記錄你用過的工具兼雄，以及簡單用法。
