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次。

欢迎大家提出建议和意见，觉得还可以的话，点个赞。github欢迎大家给个star。