Vue keep-alive的实现原理分析

什么是Vue keep-alive

Vue keep-alive 是Vue的一个内置组件。它有一个特殊的属性 include，可以用来缓存需要经常切换的组件，以提高应用的性能。当使用keep-alive包裹一个组件时，该组件会被缓存下来，并且不会被销毁。当用户再次来到这个组件页面时，不需要重新渲染这个组件，而是直接从缓存中直接取出来再次使用。

Vue keep-alive的实现原理

缓存流程

• 初次渲染：

当一个被keep-alive包裹的组件初次渲染时，该组件会被挂载到DOM上，并缓存到vnode.componentInstance 中。

• 激活缓存：

当用户离开了组件页面，该组件不会立即被销毁，而是被缓存到_cache中，并将其keepAlive属性设置为true。

• 下一次访问：

当用户再次回到这个组件页面时，根据缓存策略，组件会被从缓存中取出来，调用componentInstance.$mount()方法（重新挂载组件）。

缓存配置

• 哪些组件需要缓存

需要缓存的组件可以通过<keep-alive include="">指定。可以使用字符串、正则表达式或者一个数组来指定需要缓存的组件。当include的值为字符串时，keep-alive会匹配所有与之相同的组件。当include的值为正则表达式或者一个数组时，keep-alive会匹配所有数组中与组件名相符合的组件。

• 缓存策略

keep-alive有两个特殊的属性分别为max和min，用来控制缓存中最大和最少的组件实例数目。

生命周期钩子

当组件被缓存时，其生命周期钩子不会立即执行。当组件被再次激活时，缓存组件会先执行activated钩子函数，然后再执行组件自身的生命周期钩子函数。同样，在组件离开时，组件自身的生命周期钩子函数执行完后，才会执行缓存组件的deactivated钩子函数。

示例说明

示例一

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
    <button @click="toggleComponent">Switch Component</button>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        currentComponent: 'ComponentA'
      }
    },
    components: {
      ComponentA: {template: '<div>ComponentA</div>'},
      ComponentB: {template: '<div>ComponentB</div>'}
    },
    methods: {
      toggleComponent: function(){
        this.currentComponent = (this.currentComponent === 'ComponentA') ? 'ComponentB' : 'ComponentA';
      }
    }
  }
</script>

在该示例中，有两个组件ComponentA和ComponentB，当用户点击button时，会切换当前展示的组件。

使用keep-alive包裹component标签，可以提高这个组件的性能。当用户切换到ComponentB时，ComponentA不会被销毁，而是被缓存起来，当用户再次切回ComponentA时，不需要重新渲染该组件，而是直接从缓存中取出。

示例二

<template>
  <div>
    <keep-alive :include="includeComponents">
      <component :is="currentComponent"></component>
    </keep-alive>
    <button @click="toggleComponent">Switch Component</button>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        currentComponent: 'ComponentA',
        includeComponents: ['ComponentA']
      }
    },
    components: {
      ComponentA: {template: '<div>ComponentA</div>'},
      ComponentB: {template: '<div>ComponentB</div>'}
    },
    methods: {
      toggleComponent: function(){
        this.currentComponent = (this.currentComponent === 'ComponentA') ? 'ComponentB' : 'ComponentA';
        this.includeComponents = [this.currentComponent];
      }
    }
  }
</script>

该示例与前面的示例一非常相似，但是通过指定include属性，可以缓存指定的组件。

在该示例中，当用户切换到ComponentB时，ComponentA并不会被缓存，而是直接被销毁。当用户再次切回ComponentA时，该组件需要重新渲染。而当用户切回ComponentB时，ComponentA被销毁，ComponentB被缓存，当用户再次切回ComponentA时，需要重新渲染该组件，而不是从缓存中取出。