快捷導(dǎo)航

詳解Vue中是如何實現(xiàn)cache緩存的

更新時間：2023年07月03日 14:06:45 作者：翰玥

這篇文章分享一個比較有意思的東西，那就是Vue中如何實現(xiàn)cache緩存的，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

添加測試文件

繼續(xù)使用vitest測試,想知道具體怎么操作的，可以看下專欄第一篇文章。

剛開始學(xué)習(xí)寫測試，大家多提意見哈。

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)
})

首先模擬一個函數(shù)，這個函數(shù)傳入一個字符串，返回一個字符串。為什么要這么模擬呢？我們拿Vue當(dāng)中capitalize首字母轉(zhuǎn)大寫舉例（當(dāng)然我們可以暫時不用太多的關(guān)心capitalize是怎么實現(xiàn)的）

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

可以看到cached傳入了一個函數(shù)，這個函數(shù)要實現(xiàn)的就是傳入一個字符串，返回一個字符串（首字母轉(zhuǎn)成大寫）。所以我們要模擬的就是類似這樣的一個函數(shù)。

回歸正題

模擬了一個函數(shù)fnMock,傳給cached并執(zhí)行，返回了getName函數(shù)。然后調(diào)用getName函數(shù)傳入字符串mick,用name變量接收，這個變量我們期望應(yīng)該是mick。此時模擬的fnMock應(yīng)該被調(diào)用了一次，當(dāng)再次執(zhí)行getName函數(shù)同樣傳入mick時，仍然能拿到這個值，但是模擬的fnMock還是被調(diào)用一次。因為mick被緩存了。

沒錯，就是用文章開頭提到的"閉包"解決。

實現(xiàn)cache

不廢話，直接上代碼

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

首先創(chuàng)建一個空對象方便存儲需要緩存的值。然后返回一個函數(shù)cachedFn,參數(shù)fn就是就是我們測試中的fnMock,函數(shù)內(nèi)部首先去獲取我們想要拿到的值cache[str],第一次肯定是拿不到的，所以需要對其賦值cache[str] = fn(str)并返回,此時fnMock已經(jīng)被執(zhí)行了1次。此時根據(jù)閉包的特性，傳入的str已經(jīng)被緩存了起來。當(dāng)?shù)诙蝹魅胪瑯拥闹档臅r候，var hit = cache[str]就可以獲取到了，則直接返回，所以fnMock不會被再次執(zhí)行，只有首次執(zhí)行了1次。

到此這篇關(guān)于詳解Vue中是如何實現(xiàn)cache緩存的的文章就介紹到這了,更多相關(guān)Vue cache緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: