详解Vue中是如何实现cache缓存的
作者:翰玥
这篇文章分享一个比较有意思的东西,那就是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次。
到此这篇关于详解Vue中是如何实现cache缓存的的文章就介绍到这了,更多相关Vue cache缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!