一、前言

原文鏈接： https://github.com/qiudongwei/blog/issues/4

本文介紹的內容包括：

二、keep-alive介紹與應用

2.1 keep-alive是什么

keep-alive是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中；使用keep-alive包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。

2.2 一個場景

用戶在某個列表頁面選擇篩選條件過濾出一份數據列表，由列表頁面進入數據詳情頁面，再返回該列表頁面，我們希望：列表頁面可以保留用戶的篩選（或選中）狀態。keep-alive就是用來解決這種場景。當然keep-alive不僅僅是能夠保存頁面/組件的狀態這么簡單，它還可以避免組件反復創建和渲染，有效提升系統性能。 總的來說，keep-alive用于保存組件的渲染狀態。

2.3 keep-alive用法 在動態組件中的應用

<keep-alive :include="whiteList" :exclude="blackList" :max="amount"> <component :is="currentComponent"></component></keep-alive>

在vue-router中的應用

<keep-alive :include="whiteList" :exclude="blackList" :max="amount"> <router-view></router-view></keep-alive>

include 定義緩存白名單，keep-alive會緩存命中的組件； exclude 定義緩存黑名單，被命中的組件將不會被緩存； max 定義緩存組件上限，超出上限使用LRU的策略置換緩存數據。

三、源碼剖析

keep-alive.js 內部另外還定義了一些工具函數，我們按住不表，先看它對外暴露的對象。

// src/core/components/keep-alive.jsexport default { name: 'keep-alive', abstract: true, // 判斷當前組件虛擬dom是否渲染成真是dom的關鍵 props: {  include: patternTypes, // 緩存白名單  exclude: patternTypes, // 緩存黑名單  max: [String, Number] // 緩存的組件實例數量上限 }, created () {  this.cache = Object.create(null) // 緩存虛擬dom  this.keys = [] // 緩存的虛擬dom的健集合 }, destroyed () {  for (const key in this.cache) { // 刪除所有的緩存   pruneCacheEntry(this.cache, key, this.keys)  } }, mounted () {  // 實時監聽黑白名單的變動  this.$watch('include', val => {   pruneCache(this, name => matches(val, name))  })  this.$watch('exclude', val => {   pruneCache(this, name => !matches(val, name))  }) }, render () {  // 先省略... }}

可以看出，與我們定義組件的過程一樣，先是設置組件名為 keep-alive ，其次定義了一個 abstract 屬性，值為 true 。這個屬性在vue的官方教程并未提及，卻至關重要，后面的渲染過程會用到。