vue的keepalived工作原理

Vue 的 KeepAlive 组件可以缓存组件的状态，使得在组件切换时不需要重新渲染，从而提高了应用的性能。其工作原理如下：

1. 当 KeepAlive 组件包裹的子组件被激活时，会将子组件的 VNode 存储到内部的 cache 对象中，并将其从 DOM 树中移除。

2. 当再次渲染该组件时，会先检查 cache 中是否已经缓存了该组件的 VNode，如果有，则直接从 cache 中取出并渲染，否则重新创建该组件的实例并渲染。

3. 当组件被停用时，会将其 VNode 从 DOM 树中移除，并保留在 cache 中，以便下次使用。

4. 当 cache 中的 VNode 数量超过一定阈值时，会根据 LRU（最近最少使用）算法删除最近最少使用的 VNode。

在 KeepAlive 组件内部，会从 sharedContext 上的 renderer 上拿到一些方法，比如 move、createElement 等，这些方法是用来执行特定的销毁和渲染逻辑的。

下面是一个示例代码，演示了如何使用 KeepAlive 组件：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

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