浅谈Vue页面级缓存解决方案feb-alive(上)

<keep-alive>
 <router-view></router-view>
</keep-alive>

export default {
 name: 'keep-alive',
 abstract: true,

 props: {
 include: patternTypes,
 exclude: patternTypes,
 max: [String, Number]
 },

 created () {
 this.cache = Object.create(null)
 this.keys = []
 },

 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 () {
 // 获取默认插槽
 const slot = this.$slots.default
 // 获取第一个组件，也就和官方说明的一样，keep-alive要求同时只有一个子元素被渲染，如果你在其中有 v-for 则不会工作。
 const vnode: VNode = getFirstComponentChild(slot)
 // 判断是否存在组件选项，也就是说只对组件有效，对于普通的元素则直接返回对应的vnode
 const componentOptions: "htmlcode">

created () {
 // 存储组件缓存
 this.cache = Object.create(null)
 this.keys = []
}


由于路由切换并不会销毁keep-alive组件，所以缓存是一直存在的（嵌套路由中，子路由外层的keep-alive情况会不一样，后续会提到）


继续看下keep-alive在缓存的存储和读取的具体实现，先用一个简单的demo来描述keep-alive对于组件的缓存以及恢复缓存的过程




let Foo = {
 template: '<div class="foo">foo component</div>',
 name: 'Foo'
}
let Bar = {
 template: '<div class="bar">bar component</div>',
 name: 'Bar'
}
let gvm = new Vue({
 el: '#app',
 template: `
  <div id="#app">
   <keep-alive>
    <component :is="renderCom"></component>
   </keep-alive>
   <button @click="change">切换组件</button>
  </div>
 `,
 components: {
  Foo,
  Bar
 },
 data: {
  renderCom: 'Foo'
 },
 methods: {
  change () {
   this.renderCom = this.renderCom === 'Foo' "htmlcode">

function anonymous(
) {
 with(this){return _c('div',{attrs:{"id":"#app"}},[_c('keep-alive',[_c(renderCom,