內存緩存組件

② 2021-02-03【技術】聊聊keep-alive組件的使用及其實現原理

keep-alive定義：
keep-alive是Vue.js的一個內置組件。它能夠不活動的組件實例保存在內存中，而不是直接將其銷毀，它是一個抽象組件，不會被渲染到真實DOM中，也不會出現在父組件鏈中。

它提供了include與exclude兩個屬性，允許組件有條件地進行緩存。

這里的component組件會被緩存起來。

舉個栗子

在點擊button時候，coma與comb兩個組件會發生切換，但是這時候這兩個組件的狀態會被緩存起來，比如說coma與comb組件中都有一個input標簽，那麼input標簽中的內容不會因為組件的切換而消失。

props
keep-alive組件提供了include與exclude兩個屬性來允許組件有條件地進行緩存，二者都可以用逗號分隔字元串、正則表達式或一個數組來表示。
include: 字元串或正則表達式。只有匹配的組件會被緩存。
exclude: 字元串或正則表達式。任何匹配的組件都不會被緩存。

keep-alive的稿老聲明周期執行
頁面第一次進入，鉤子的觸發順序
created-> mounted-> activated，退出時觸發 deactivated
當再次進入（前進或者後退）時，只觸發 activated
事件掛載的方法等，只執行一次的放在 mounted 中；組件每次進去執行的方法放在 activated 中；

將緩存name為a的組件。

name為a的組件將不會被緩存。
注意：此處的name值是與在名稱為component組件中的name值對應的。

生命鉤子
keep-alive提供了兩個生命鉤子，分別是activated與deactivated。

被keepalive包含的組件不會被再次初始化，也就意味著不會重走生命周期函數
但是有時候是希望我們緩存的組件可以能夠再次進行渲染，這時 Vue 為我們解決了這個問題
被包含在 keep-alive 中創建的組件，會多出兩個生命周期的畝腔鉤子: activated 與 deactivated：
activated 當 keepalive 包含的組件再次渲染的時候觸發
deactivated 當 keepalive 包含的組件銷毀的時候觸發
keep-alive是一個抽象的組件，keep-alive會將組件保存在內存中，並不會銷毀以及重新創建，所以不會重新調用組件的created等方法，緩存的組件不會被 mounted,為此需要用activated與deactivated這兩個生命鉤子來得知當前組件是否處於活動狀態。

參數理解

keep-alive 可以接收3個屬性做為參數進行匹配對應的組件進行緩存:

include 包含的組件(可以為字元串，數組，以及正則表達式,只有匹配的組件會被緩存)
exclude 排除的組件(以為字元串，數組，以及正則表達式,任何匹配的組件都不會被緩存)
max 緩存組件的最大值(類型為字元或者數字,可以控制緩存組件的個數)
註：當使用正則表達式或者數組時，一定要使用 v-bind

遇見 vue-router 結合router使用，緩存部分頁面

所有路徑下的視圖組件都會被緩存

如果只想要router-view裡面的某個組件被緩存，怎麼迅敬衫辦？
1、使用 include/exclude
2、使用 meta 屬性

缺點：需要知道組件的 name，項目復雜的時候不是很好的選擇

優點：不需要例舉出需要被緩存組件名稱

使用$route.meta的keepAlive屬性：

需要在router中設置router的元信息meta：

說完了keep-alive組件的使用，我們從源碼角度看一下keep-alive組件究竟是如何實現組件的緩存的呢？

created鉤子會創建一個cache對象，用來作為緩存容器，保存vnode節點。

destroyed鉤子則在組件被銷毀的時候清除cache緩存中的所有組件實例。

假設這里有 3 個路由： A、B、C。

需求如下：
默認顯示 A
B 跳到 A，A 不刷新
C 跳到 A，A 刷新

實現方式如下：
在 A 路由裡面設置 meta 屬性：

在 B 組件裡面設置 beforeRouteLeave：

在 C 組件裡面設置 beforeRouteLeave：

這樣便能實現 B 回到 A，A 不刷新；而 C 回到 A 則刷新。

防坑指南
1.keep-alive 先匹配被包含組件的 name 欄位，如果 name 不可用，則匹配當前組件 components 配置中的注冊名稱。
2.keep-alive 不會在函數式組件中正常工作，因為它們沒有緩存實例。
3.當匹配條件同時在 include 與 exclude 存在時，以 exclude 優先順序最高(當前vue 2.4.2 version)。比如：包含於排除同時匹配到了組件A，那組件A不會被緩存。
4.包含在 keep-alive 中，但符合 exclude ，不會調用 activated 和 deactivated。

keep-alive生命周期鉤子函數：activated、deactivated
使用<keep-alive>會將數據保留在內存中，如果要在每次進入頁面的時候獲取最新的數據，需要在activated階段獲取數據，承擔原來created鉤子中獲取數據的任務。

附錄，題外話
生命周期函數：就是vue在某個時間段會自動執行的函數

1、beforeCreate(){}在執行的時候，data還有methods都沒有被初始化。
2、created(){} data還有methods都被初始化好了，如果要調用 methods 方法或者操作 data 裡面的數據，最早只能在 created 裡面進行操作。
3、beforeMount(){} 表示模板已經在內存中編輯完成了，但是尚未渲染到模板頁面中。即頁面中的元素，沒有被真正的替換過來，只是之前寫的一些模板字元串。
4、mounted(){} 表示內存中模板已經真實的掛載到頁面中去了，用戶可以看到渲染好的界面了
注意這是一個生命周期函數的最後一個函數了，執行完這個函數表示 整個vue實例已經初始化完成了，組件脫離了創建階段，進入運行階段。

下面是運行期間的兩個生命周期函數的鉤子：
5、beforeUpdate(){} 表示我們的界面還沒更新 但是data裡面的數據是最新的。即頁面尚未和最新的data裡面的數據保持同步。
6、update(){} 表示頁面和data裡面的數據已經包吃同步了 都是最新的。
7、beforeDestory(){} 當執行這個生命周期鉤子的時候 vue的實例從運行階段進入銷毀階段 此時實例身上的data 還有 methods處於可用的狀態。
8、Destoryed(){} 表示組件已經完全被銷毀了 組件中所有的實例方法都是不能用了

③ 簡述內存,高速緩存,外存之間的區別和聯系

內存和外存的本質區別是，一個是內部運行提供緩存和處理的功能，也可以理解為協同處理的通道；而外存主要是針對儲存文件、圖片、視頻、文字等信息的載體，也可以理解為儲存空間。
內存是計算機中重要的部件之一，它是與CPU進行溝通的橋梁。計算機中所有程序的運凱笑行都是在內存盯早含中進行的，因此內存的性能對計算機的影響非常大。內存(Memory)也被稱為內存儲器，其作用是用於暫時存放CPU中的運算數據，以及與硬碟等外部存儲器交換的數據。只要計算機在運行中，CPU就會把需要運算的數據調到內存中進行運算，當運算完成後CPU再將結果傳送出來，內存的運行也決定了計算機的穩定運行。 內存是由內存晶元、電路板、金手指等部分組成的。
內存和外存的本質區別是，一個是內部運行提供緩存和處理的功能，也可以理解為協同處理的通道；而外存主要是針對儲存文件、圖片、視頻、文字等信息的載體，也可以理解為儲存空間。內存是計算機中重要的部件之一，它是與CPU進行溝通的橋梁。計算機中所有程序的運行都是在內存中進行的，因此內存的性能對計算機的影響非常大。內存(Memory)也被稱為內存儲器，其作用是用於暫時存放CPU中的運算數據，以及與硬碟等外部存儲器交換的數據。只要計算機在運行中，CPU就會把需要運算的數據調到內存中進行運算，當運算完成後CPU再將結果傳送出來，內存的運行也決定了計算機的穩定運行。 內存是由內存晶元、電路板、金手指等部分組成的。睜掘
而外存為了擴大存儲容量，在計算機中還配備了存儲容量更大的磁碟存儲器和光碟存儲器，稱為外存儲器，簡稱外存。此類儲存器一般斷電後仍然能保存數據。常見的外存儲器有硬碟、軟盤、光碟、U盤等。

④ 內存集成有哪些

Q: 內存集成有哪些 : ？
內存集成包括：1、敬兆緩存集成，2、內存資料庫集成，3、內存緩存伺服器集成，4、內存分布式緩存集察前成，5、內存分布式資料庫集成，6、內存虛擬機集成，7、內存亮沒租存儲系統集成，8、非關系型資料庫集成，9、內存對象存儲集成，10、內存鍵值存儲集成。

⑤ 緩存、內存、快閃記憶體的區別分別指什麼樣的東西

一、主體不同

1、緩存：是指訪問速度比一般隨機存取存儲器（RAM）快的一種高速存儲器

2、內存：是計算機中重要的部件之一，它是外存與CPU進行溝通的橋梁。

3、快閃記憶體：一種電子式可清除程序化只讀存儲器的形式，允許在操作中被多次擦或寫的存儲器。

二、特點不同

1、緩存：不像系統主存那樣使用DRAM技術，而使用昂貴但較快速的SRAM技術。

2、內存：內存的運行也決定了計算機的穩定運行。內存條是由內存晶元、電路板、金手指等部分組成的。

3、快閃記憶體：是一種特殊的、以宏塊抹寫的EPROM。快閃記憶體進行一次抹除，就會清除掉整顆晶元上的數據。

三、作用不同

1、緩存：可以進行高速數據交換的存儲器，它先於內存與CPU交換數據，因此速率很快。

2、內存：作用是用於暫時存放CPU中的運算數據，以及與硬碟等外部存儲器交換的數據。

3、快閃記憶體：是一種非易失性存儲器，即斷電數據也不會丟失。因為快閃記憶體不像RAM（隨機存取存儲器）一樣以位元組為單位改寫數據，因此不能取代RAM。

⑥ 內存、緩存、快閃記憶體的定義和具體作用！

緩存是指可以進行高速數據交換的存儲器，它先於內存與CPU交換數據，因此速度很快
緩存（Cache memory）是硬碟控制器上的一塊內存晶元，具有極快的存取速度，它是硬碟內部存儲和外界介面之間的緩沖器。由於硬碟的內部數據傳輸速度和外界介面傳輸速度不同，緩存在其中起到一個緩沖的作用。緩存的大小與速度是直接關繫到硬碟的傳輸速度的重要因素，能夠大幅度地提高硬碟整體性能。當硬碟存取零碎數據時需要不斷地在硬碟與內存之間交換數據，如果有大緩存，則可以將那些零碎數據暫存在緩存中，減小外系統的負荷，也提高了數據的傳輸速度。

硬碟的緩存主要起三種胡虧轎作用：一是預讀取。當硬碟受到CPU指令控制開始讀取數據時，硬碟上的控制晶元會控制磁頭把正在讀取的簇的下一個或者幾個簇中的數據讀到緩存中（由於硬碟上數據存儲時是比較連續的，所以讀取命中率較高），當需要讀取下一個或者幾個簇中的數據的時候，硬碟則不需要再次讀取數據，直接把緩存中的數據傳輸到內存中就可以了，由於緩存的速度遠遠高於磁頭讀寫的速度，所以能夠達到明顯改善性能的目的；二是對寫入動作進行緩存。當硬碟接到寫入數據的指令之後，並不會馬上將數據寫入到碟片上，而是先暫時存儲在緩存里，然後發送一個「數據已寫入」的信號給系統，這時系統就會認為數據已經寫入，並繼續執行下面的工作，而硬碟則在空閑（不進行褲肆讀取或寫入的時候）時再將緩存中的數據寫入到碟片上。雖然對於寫入數據的性能有一定提升，但也不可避免地帶來了安全隱患——如果數據還在緩存里的時候突然掉電，那麼這些數據就會丟失。對於這個問題，硬碟廠商們自然也有解決辦法：掉電時，磁頭會藉助慣性將緩存中的數據寫入零磁軌以外的暫存區域，等到下次啟動時再將這些數據寫入目的地；第三個作用就是臨時存儲最近訪問過的數據。有時候，某些數據是會經常需要訪問的，硬碟內部的緩存會將讀取比較頻繁的一些數據存儲在緩存中，再次讀取時就可以直接從緩存中直接傳輸

計算機業界，內存這個名詞被廣泛用來稱呼 RAM( 隨機存取內存 ) 計算機使用隨機存取內存來儲存執行作業所須的暫時指令以及數據以使計算機的 CPU( 中央處理器 ) 能夠更快速讀取儲存在內存的指令及數據。
例來說，當處理器載入一個應用程序 - 例如文字處理或頁面編輯程序 - 到內存使應用程序能以最快速及最高效率的方式執行。以實用價值而言，將程序載入內存能夠確保計算機能以更短的時間來執行作業而使工作能夠更迅速地完成
內存與儲存的差別

大多數人常將內存 (Memory) 與儲存空間 (Storage) 兩個名字混為一談 , 尤其是在談到兩者的容量的時候 內存是指 (Memory) 計算機中所安裝的隨機存取內存的容量而儲存 (Storage) 是指計算機內硬碟的容量 為了避免混淆 , 我們將計算機比喻為一個有辦公桌與檔案櫃的辦公室。想像一下這個辦公桌與檔案櫃的比喻。想像每次想要閱讀一份文件或數據夾都必須從檔案櫃中找尋的情形，這會大幅減低工作執行的速度 , 更別說會把人逼瘋了。如果有足夠的辦公桌空間 ( 如內存 ), 便能夠將所需要的檔攤開 , 並能立即一眼就能找出所需的信息。

另一個內存與儲存最重要的差別在於 : 儲存於硬碟中的信息在關機後能夠保持完整，但任何儲存在內存中的數據在計算機關機後便會全部流失。就像在辦公室的比喻中 , 任何在下空汪班時間後被遺留在桌上的檔或檔案都會全部被丟棄一樣
增加計算機系統中的內存能夠增加計算機的效能表現是眾所皆知的。如果內存沒有足夠的空間 , 計算機就必須建立一個虛擬內存檔案。在這個過程中 , 中央處理器在硬碟中保留一個空間來代替額外的隨機存取內存 這個稱為 」 Swapping」 的程序減低系統的速度一般的計算機從內存存取大約需要 200ns( 奈秒 ), 但從硬碟存取則需要 12,000,000ns 具體來說就等於花四個半月的時間來完成三分半中就能完成的工作 !
快閃記憶體存儲器是保留實力,即使其內容刪除.

Flash memory is a form of EAPROM (Electrically Alterable Programmable Read-Only Memory).快閃記憶體是一種eaprom(可變電可編程只讀存儲器).

Each bit of data in a flash memory device is stored in a transistor called a floating gate.每一個比特的數據儲存在快閃記憶裝置稱為浮柵晶體管. The floating gate can only be accessed though another transistor, the control gate.浮動門雖然只能進入另一個晶體管,控制閘門.

The process the control gate uses to access the floating gate is a field emission phenomenon known as Fowler-Nordheim tunneling.利用過程式控制制閘門進入浮柵是場發射現象稱為Fowler-Nordheim隧. Tunneling allows voltage to flow from the control gate to the floating gate through the dielectric layer of oxide which separates them.允許從隧道流電壓控制的浮動柵柵絕緣層氧化物通過分隔他們.

⑦ 什麼是內存緩存是干什麼用的

緩存顧名思義就是緩沖存儲的意思
當電腦從硬碟或網路中提取數據給CPU處理或CPU中處理的數據發送給輸出設備都是經過內存集中發送，你內存512M，但當數據量大的時候一下子塞給CPU或一下字塞給內存或其他硬體都會造成數據堵塞而死機，這里緩存就起到一個緩沖數據的作用，避免死機，內存越大，緩存越大，系統運行速度就越快，這就是為什麼內存在電腦中占重要地位的原因

⑧ Vue 怎麼緩存當前的組件緩存後怎麼更新說說你對keep-alive的理解是什麼

keep-alive 是 vue 中的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染 DOM

keep-alive 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們

keep-alive 可以設置以下 props 屬性：

關於 keep-alive 的基本用法：

使用 includes 和 exclude ：

匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)，匿名組件不能被匹配

設置了 keep-alive 緩存的組件，會多出兩個生命周期鉤子（ activated 與 deactivated ）：

使用原則：當我們在某些場景下不需要讓頁面重新載入時我們可以使用 keepalive

舉個栗子:

當我們從 首頁 –> 列表頁 –> 商詳頁 –> 再返回 ，這時候列表頁應該是需要 keep-alive

從 首頁 –> 列表頁 –> 商詳頁 –> 返回到列表頁(需要緩存) –> 返回到首頁(需要緩存) –> 再次進入列表頁(不需要緩存) ，這時候可以按需來控制頁面的 keep-alive

在路由中設置 keepAlive 屬性判斷是否需要緩存

使用 <keep-alive>

keep-alive 是 vue 中內置的一個組件

源碼位置：src/core/components/keep-alive.js

可以看到該組件沒有 template ，而是用了 render ，在組件渲染的時候會自動執行 render 函數

this.cache 是一個對象，用來存儲需要緩存的組件，它將以如下形式存儲：

在組件銷毀的時候執行 pruneCacheEntry 函數

在 mounted 鉤子函數中觀測 include 和 exclude 的變化，如下：

如果 include 或 exclude 發生了變化，即表示定義需要緩存的組件的規則或者不需要緩存的組件的規則發生了變化，那麼就執行 pruneCache 函數，函數如下：

在該函數內對 this.cache 對象進行遍歷，取出每一項的 name 值，用其與新的緩存規則進行匹配，如果匹配不上，則表示在新的緩存規則下該組件已經不需要被緩存，則調用 pruneCacheEntry 函數將其從 this.cache 對象剔除即可

關於 keep-alive 的最強大緩存功能是在 render 函數中實現

首先獲取組件的 key 值：

拿到 key 值後去 this.cache 對象中去尋找是否有該值，如果有則表示該組件有緩存，即命中緩存，如下：

直接從緩存中拿 vnode 的組件實例，此時重新調整該組件 key 的順序，將其從原來的地方刪掉並重新放在 this.keys 中最後一個

this.cache 對象中沒有該 key 值的情況，如下：

表明該組件還沒有被緩存過，則以該組件的 key 為鍵，組件 vnode 為值，將其存入 this.cache 中，並且把 key 存入 this.keys 中

此時再判斷 this.keys 中緩存組件的數量是否超過了設置的最大緩存數量值 this.max ，如果超過了，則把第一個緩存組件刪掉

解決方案可以有以下兩種：

每次組件渲染的時候，都會執行 beforeRouteEnter

在 keep-alive 緩存的組件被激活的時候，都會執行 actived 鉤子

注意：伺服器端渲染期間 avtived 不被調用