彻底揭秘keep-alive原理(小结)

一、前言

原文链接： 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的官方教程并未提及，却至关重要，后面的渲染过程会用到。