二、keep-alive介紹與應用
2.1 keep-alive是什麼
keep-alive是乙個抽象元件：它自身不會渲染乙個dom元素，也不會出現在父元件鏈中；使用keep-alive包裹動態元件時，會快取不活動的元件例項，而不是銷毀它們。
乙個場景
使用者在某個列表頁面選擇篩選條件過濾出乙份資料列表，由列表頁面進入資料詳情頁面，再返回該列表頁面，我們希望：列表頁面可以保留使用者的篩選（或選中）狀態。
keep-alive就是用來解決這種場景。當然keep-alive不僅僅是能夠儲存頁面/元件的狀態這麼簡單，它還可以避免元件反覆建立和渲染，有效提公升系統效能。總的來說，keep-alive用於儲存元件的渲染狀態。
在動態元件中的應用
記憶體管理的一種頁面置換演算法，對於在記憶體中但又不用的資料塊（記憶體塊）叫做lru，作業系統會根據哪些資料屬於lru而將其移出記憶體而騰出空間來載入另外的資料。
keep-alive.js內部還定義了一些工具函式，我們按住不動，先看它對外暴露的物件
// src/core/components/keep-alive.js
export default ,
created() ,
destroyed()
},mounted() )
this.$watch('exclude', val => )
}, render()
}
keep-alive在它生命週期內定義了三個鉤子函式：
// src/core/components/keep-alive.js
function prunecacheentry (
cache: vnodecache,
key: string,
keys: array,
current?: vnode
) cache[key] = null
remove(keys, key)
}
function prunecache (keepaliveinstance: any, filter: function) = keepaliveinstance
for (const key in cache)
}}}
render () = this
if (// 條件匹配
// not included
（include && (!name || !matches(include, name))）||
// excluded
(exclude && name && matches(exclude, name))
) const = this
// 定義元件的快取key
const key: ?string = vnode.key === null ? componentoptions.ctor.cid + (componentoptions.tag ? `::$` : '') : vnode.key
if (cache[key]) else
}vnode.data.keepalive = true //渲染和執行被包裹元件的鉤子函式需要用到 }
return vnode || (slot && slot[0])
}
第二步：根據設定的黑白名單（如果有）進行條件匹配，決定是否快取。不匹配，直接返回元件例項（vnode），否則執行第三步；
第三步：根據元件id和tag生成快取key，並在快取物件中查詢是否已快取過該元件例項。如果存在，直接取出快取值並更新該key在this.keys中的位置（更新key的位置是實現lru置換策略的關鍵），否則執行第四步；
第四步：在this.cache物件中儲存該元件例項並儲存key值，之後檢查快取的例項數量是否超過max設定值，超過則根據lru置換策略刪除最近最久未使用的例項（即是下標為0的那個key）;
第五步：最後並且很重要，將該元件例項的keepalive屬性值設定為true。
Keepalive工作原理
keepalived軟體起初是專為lvs負載均衡軟體設計的，用來管理並監控lvs集群系統中各個服務節點的狀態，後來又加入了可以實現高可用的vrrp功能。因此，keepalived除了能夠管理lvs軟體外，還可以作為其他服務 例如 nginx haproxy mysql等 的高可用解決方案軟體。kee...
keep alive 的實現原理和使用方法
export default created destroyed mounted this.watch exclude val render this if not included include name matches include,name excluded exclude name ma...
keep alive的原理及使用
內建元件keep alive 主要用於保留元件狀態或避免重新渲染。keep alive生命週期鉤子函式 activated deactivated，每次進入離開過程都呼叫一次 comp1 頁面跳轉至 home頁面，home頁面不重新整理 comp2 頁面跳轉至 home頁面，home頁面重新整理 配...