背景：在 B 端系统中，为了使用方便咱们会在页面设计中加上标签页相似浏览器上方标签页的性能，为了应用体验更加靠近浏览器标签页，咱们须要针对路由进行缓存。本文次要介绍 Vue 我的项目针对不同业务场景如何利用 keep-alive 来实现标签页动静缓存。

对于 keep-alive

keep-alive 是一个形象组件，不会和子组件建设父子关系，也不会作为节点渲染到页面上。

对于形象组件 Vue 的文档没有提这个概念，它有一个属性 abstract 为 true，在形象组件的生命周期过程中，咱们能够对包裹的子组件监听的事件进行拦挡，也能够对子组件进行 Dom 操作，从而能够对咱们须要的性能进行封装，而不须要关怀子组件的具体实现。除了 kepp-alive 还有 <transition>、<transition-group> 等。

作用

• 能在组件切换过程中将状态保留在内存中，避免反复渲染 DOM。
• 防止重复渲染影响页面性能，同时也能够很大水平上缩小接口申请，减小服务器压力。
• 可能进行路由缓存和组件缓存。

Activated

keep-alive 的模式下多了 activated 这个生命周期函数, keep-alive 的申明周期执行:

• 页面第一次进入，钩子的触发程序

created-> mounted-> activated，退出时触发 deactivated 当再次进入（后退或者后退）时，只触发 activated。

• 事件挂载的办法等，只执行一次的放在 mounted 中；组件每次进去执行的办法放在 activated 中。

keep-alive 解析

渲染

keep-alive 是由 render 函数决定渲染后果, 在结尾会获取插槽内的子元素，调用 getFirstComponentChild 获取到第一个子元素的 VNode。

const slot = this.$slots.default
const vnode: VNode = getFirstComponentChild(slot)

接着判断以后组件是否合乎缓存条件，组件名与 include 不匹配或与 exclude 匹配都会间接退出并返回 VNode，不走缓存机制。

// check pattern
const name: ?string = getComponentName(componentOptions)
const {include, exclude} = this
if (
// not included
(include && (!name || !matches(include, name))) ||
// excluded
(exclude && name && matches(exclude, name))
) {return vnode}

匹配条件通过会进入缓存机制的逻辑，如果命中缓存，从 cache 中获取缓存的实例设置到以后的组件上，并调整 key 的地位将其放到最初 (LRU 策略)。
如果没命中缓存，将以后 VNode 缓存起来，并退出以后组件的 key。如果缓存组件的数量超出 max 的值，即缓存空间有余，则调用 pruneCacheEntry 将最旧的组件从缓存中删除，即 keys[0] 的组件。之后将组件的 keepAlive 标记为 true，示意它是被缓存的组件。

LRU 缓存策略：从内存中找出最久未应用的数据置换新的数据. 算法依据数据的历史拜访记录来进行淘汰数据，其核心思想是如果数据最近被拜访过，那么未来被拜访的几率也更高。

const {cache, keys} = this
const key: ?string = vnode.key == null
// same constructor may get registered as different local components
// so cid alone is not enough (#3269)
  ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key
if (cache[key]) {vnode.componentInstance = cache[key].componentInstance
  // make current key freshest
  remove(keys, key)
  keys.push(key)
} else {cache[key] = vnode
  keys.push(key)
  // prune oldest entry
  if (this.max && keys.length > parseInt(this.max)) {pruneCacheEntry(cache, keys[0], keys, this._vnode)
  }
}

pruneCacheEntry 负责将组件从缓存中删除，它会调用组件 $destroy 办法销毁组件实例，缓存组件置空，并移除对应的 key。

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {const cached = cache[key]
  if (cached && (!current || cached.tag !== current.tag)) {cached.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}

渲染总结

• 通过 getFirstComponentChild 获取第一个子组件，获取该组件的 name；
• 通过 include 与 exclude 属性进行匹配，判断以后组件是否要被缓存，如果匹配胜利；
• 命中缓存则间接获取，同时更新 key 的地位；
• 不命中缓存则设置进缓存，同时查看缓存的实例数量是否超过 max，超过则依据 LRU 策略删除最近最久未应用；
• 如果在中途有对 include 和 exclude 进行批改，通过 watch 来监听 include 和 exclude，在其扭转时调用 pruneCache 以批改 cache 缓存中的缓存数据。

基于 keep-alive 缓存实现计划

计划一：整个页面缓存

个别采纳在 router 的 meta 属性里减少一个 keepAlive 字段，而后在父组件或者根组件中，依据 keepAlive 字段的状态应用 keep-alive 标签，实现对路由的缓存：

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

计划二：动静组件缓存

应用 vuex 配合 exclude 和 include，通过 include 和 exclude 决定那些组件进行缓存。留神这里说的是组件，并且 cachedView 数组寄存的是组件的名字，如下：

<keep-alive :include="$store.state.keepAlive.cachedView">
    <router-view></router-view>
</keep-alive>

场景剖析

在 SPA 利用中用户心愿在 Tab 多个页面来回切换的时候，不要失落查问的后果，敞开后革除缓存。

如下图：

冀望是用户在切换 Tab 时 页面时缓存的，当用户敞开 Tab，从新从左侧菜单关上时是不缓存。

路由缓存计划

这样是长久缓存了整个页面，问题也就呈现当用户通过 Tab 敞开页面而后从左侧关上菜单时是缓存的页面，这个不合乎日常应用习惯，所以为了解决数据新鲜度的问题能够在 activated 触发查问申请就能保证数据的新鲜度。

activated(){getData()
}

然而应用后发现因为你切换 Tab 时每次都会申请数据，然而如果我的项目的数据量有很大频繁申请会给后端造成很大压力。

动静组件缓存计划

版本一须要频繁拉去数据导致此计划已不适合只能动静缓存组件计划。

<keep-alive :include="cachedViews">
  <router-view :key="key"></router-view>
</keep-alive>

其中 cachedViews 是通过监听路由动静减少删除保护要缓存的组件名称（所以组件名称不要反复）数组：

const state = {cachedViews: [],
}
const mutations = {ADD_VIEWS: (state, view) => {if (state.cachedViews.includes(view.name)) return
    state.cachedViews.push(view.name)
  },
  DEL_CACHED_VIEW: (state, view) => {const index = state.cachedViews.indexOf(view.name)
    index > -1 && state.cachedViews.splice(index, 1)
  },
}
const actions = {addCachedView({ commit}, view) {commit('ADD_VIEWS', view)
  },
  deleteCachedView({commit}, view) {commit('DEL_CACHED_VIEW', view)
  },
}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
}

通过监听路由变动：

watch: {'$route'(newRoute) {const { name} = newRoute
      const cacheRout = this.ISCACHE_MAP[name] || []
      cacheRout.map((item) => {store.dispatch('cached/addCachedView', { name: item})
      })
    },
  },
当通过 Tab 敞开页面时革除组件名称：closeTag(newRoute) {const { name} = newRoute
   const cacheRout = this.ISCACHE_MAP[name] || []
   cacheRout.map((item) => {store.dispatch('cached/deleteCachedView', { name: item})
   })
 }

然而在遇到嵌套路由时在层级不同的 router-view 中切换 Tab 会呈现缓存数据生效的问题，无奈缓存组件，嵌套路由如下：

如何解决？

• 计划一：菜单嵌套，路由不嵌套

通过保护两套数据，一套嵌套给左侧菜单，一套扁平化后注册路由，革新后的路由：

• 计划二：批改 keep-alive 把 catch 对象到全局

通过下面 keep-alive 解析能够晓得，keep-alive 就是把通过 include 匹配的组件的 vnode，放到 keep-alive 组件的一个 cache 对象中，下次渲染时，如果能在这外面找到，就间接渲染 vnode。所以把这个 cache 对象，放到全局去（全局变量或者 vuex），这样我就能够不必缓存 ParnetView 也能缓存其指定的子组件了。

import Vue from 'vue'
const cache = {}
const keys = []
export const removeCacheByName = (name) => {/* 省略移除代码 */}
export default Object.assign({}, Vue.options.components.KeepAlive, {
  name: 'NewKeepAlive',
  created() {
    this.cache = cache
    this.keys = keys
  },
  destroyed() {},
})

• 计划三：批改 keep-alive 依据路由 name 缓存

从上文能够晓得 keep-alive 是从 cache 中获取缓存的实例设置到以后的组件上，key 是组件的名称，能够通过革新 getComponentName 办法，组件名称获取更改为路由名称使其缓存的映射关系只与 route name 值有关系。

function getComponentName(opts) {return this.$route.name}

cache 缓存 key 也更改为路由名称。

参考链接

• https://cn.vuejs.org/v2/api/#…
• https://cn.vuejs.org/v2/guide…
• https://juejin.cn/post/684490…

文|揣歪

关注得物技术，携手走向技术的云端