手牽手一塊兒學習keep-alive

在咱們的平時開發工做中，有些組件不須要屢次渲染，須要將組件在內存中進行「持久化」。<keep-alive> 是一個抽象組件，在包裹組件時會緩存組件實例，而不是銷燬它們。它是個抽象組件，自身不會渲染一個DOM元素，也不會出如今父組件鏈中。

舉個例子？不存在的。。我是不會舉例子的

使用方法

activated 和 deactivated

組件一旦被 <keep-alive> 緩存，再次渲染的時候就不會執行 created 、 mounted 等鉤子函數，因此不會有通常的組件生命週期函數，可是不少業務場景都是但願被緩存的組件再次被渲染的時候作一些事情，activated 和 deactivated 鉤子函數就能夠派上用場，它的執行時機是 <keep-alive> 包裹的組件渲染的時候。 組件在 <keep-alive> 內被切換，它的 activated和deactivated這兩個生命週期鉤子函數將會被對應執行。
一、activated：頁面組件被激活的時候調用，第一次渲染（首次進入組件）的時候會被調用：created -> mounted -> activated。以後每次<keep-alive> 激活activated被調用，因此能夠在每次進入頁面的時候獲取最新的數據。
二、deactivated：頁面組件被停用時調用。

配合<router-view>使用

<keep-alive>除了能夠包裹普通組件外，它還能夠配合 <router-view> 使用，將整個路由頁面一塊兒緩存下來，實際使用場景比較多。
舉個例子：首頁list，默認在list頁面。B跳轉到list，list不刷新；C跳轉到list，list刷新。
在2.1.0以前，在路由選項中，配置meta屬性，keepAlive爲true即爲須要緩存的組件，大多數寫法是這樣的：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
複製代碼

//router配置
new Router({
    routes: [
        {
            name: 'list',
            path: '/list',
            component: list,
            meta: {
                keepAlive: true // // 須要被緩存
            }
        }
    ]
})
複製代碼

用到組件內的路由守衛,在 B 組件裏面設置 beforeRouteLeave：

export default {
	data() {
		return {};
	},
	methods: {},
	beforeRouteLeave(to, from, next) {
		 // 設置下一個路由的 meta
		to.meta.keepAlive = true;  // 讓 list 緩存，即不刷新
		next();
	}
};
複製代碼

用到組件內的路由守衛，在 C 組件裏面設置 beforeRouteLeave：

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 設置下一個路由的 meta
            to.meta.keepAlive = false;  // 讓 list 不緩存，即刷新
            next();
        }
};
複製代碼

include 和 exclude

2.1.0新增了include和exclued屬性，容許組件有條件地緩存，能夠是字符串、正則表達式或數組。include 表示只有匹配的組件會被緩存，而 exclude 表示任何匹配的組件都不會被緩存。

<!-- 逗號分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正則表達式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 數組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>
複製代碼

<!-- 一個include解決了，不須要多寫一個標籤，也不須要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
    <router-view></router-view>
</keeo-alive>
複製代碼

<keep-alive> 先匹配被包含組件的 name 字段，若是 name 不可用，則匹配當前組件 components 配置中的註冊名稱。

結束語

原本應該舉詳細的栗子來分析下場景，但都是公司項目，不便貼出。因此，我沒騙你吧，我真沒舉例子。本身太懶，又不想寫demo，我....懶。
本文提供一種解決思路，僅作參考。若有不當之處，煩請不吝指出。另外，如對本文內容有意見或建議，歡迎一塊兒交流探討。