Vue中的cache缓存，原来是这样啊

上篇文章写了arrify转数组，无论传给arrify什么样的数据都是返回一个数组，相对而言还是比较简单的。这篇文章分享一个比较有意思的东西，那就是Vue中如何实现cache缓存的。提前揭晓答案–闭包。下面我们就来手写一个吧。第一步，毫无疑问当然是我们的测试文件咯。

添加测试文件

继续使用vitest测试,想知道具体怎么操作的，可以看下专栏第一篇文章。

刚开始学习写测试，大家多提意见哈。😋

test.only("cached", () => {const fnMock = vi.fn((str) => str)const getName = cached(fnMock)const name = getName("mick")expect(name).toBe("mick")expect(fnMock).toHaveBeenCalled()expect(fnMock).toHaveBeenCalledTimes(1)const name1 = getName("mick")expect(name1).toBe("mick")expect(fnMock).toHaveBeenCalledTimes(1)
}) 

首先模拟一个函数，这个函数传入一个字符串，返回一个字符串。为什么要这么模拟呢？我们拿Vue当中capitalize首字母转大写举例（当然我们可以暂时不用太多的关心capitalize是怎么实现的）

const capitalize = cached((str) => {return str.charAt(0).toUpperCase() + str.slice(1)
}) 

可以看到cached传入了一个函数，这个函数要实现的就是传入一个字符串，返回一个字符串（首字母转成大写）。所以我们要模拟的就是类似这样的一个函数。

回归正题

模拟了一个函数fnMock,传给cached并执行，返回了getName函数。然后调用getName函数传入字符串mick,用name变量接收，这个变量我们期望应该是mick。此时模拟的fnMock应该被调用了一次，当再次执行getName函数同样传入mick时，仍然能拿到这个值，但是模拟的fnMock还是被调用一次。因为mick被缓存了。

没错，就是用文章开头提到的"闭包"解决。

实现cache

不废话，直接上代码

export function cached(fn) {const cache = Object.create(null)return function cachedFn(str) {var hit = cache[str]return hit || (cache[str] = fn(str))}
} 

首先创建一个空对象方便存储需要缓存的值。然后返回一个函数cachedFn,参数fn就是就是我们测试中的fnMock,函数内部首先去获取我们想要拿到的值cache[str],第一次肯定是拿不到的，所以需要对其赋值cache[str] = fn(str)并返回,此时fnMock已经被执行了1次。此时根据闭包的特性，传入的str已经被缓存了起来。当第二次传入同样的值的时候，var hit = cache[str]就可以获取到了，则直接返回，所以fnMock不会被再次执行，只有首次执行了1次。

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享