深入理解Vue keep-alive及实践总结

什么是 Vue keep-alive？

Vue keep-alive 是 Vue.js 的一个内置组件，用于缓存组件。当一个组件被包裹在 Vue keep-alive 组件中时，这个组件就可以被缓存起来，在需要时随时重新加载。

使用示例

基本用法

<template>
  <div>
    <button @click="show">显示/隐藏</button>
    <keep-alive>
      <div v-if="showChild">
        <child></child>
      </div>
    </keep-alive>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data() {
    return {
      showChild: true
    }
  },
  methods: {
    show() {
      this.showChild = !this.showChild
    }
  }
}
</script>

在这个示例中，我们展示了一个按钮，用于显示或隐藏一个包含 Child 组件的 div。这个 div 被包裹在 keep-alive 组件中，因此可以被缓存。在 show 方法中，我们通过改变 showChild 的值来实现显示或隐藏。

根据路由缓存页面组件

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

<script>
export default {
  watch: {
    $route(to, from) {
      if (to.meta.keepAlive !== from.meta.keepAlive) {
        let $vnode = this.$refs.keepAlive.wrapVnode;
        let cacheIncludeKey = to.fullPath; // 缓存的key，可以使用 to.fullPath 或者自定义
        if (to.meta.keepAlive && !$vnode.componentInstance.cache[cacheIncludeKey]) {
          $vnode.componentInstance.cache[cacheIncludeKey] = $vnode.componentInstance.$refs[`comp${cacheIncludeKey.replace(/\//g, "_")}`][0];
          $vnode.componentInstance.keys.push(cacheIncludeKey);
        }
        else {
          $vnode.componentInstance.cache[cacheIncludeKey] = undefined;
          let pos = $vnode.componentInstance.keys.indexOf(cacheIncludeKey);
          if (pos > -1) {
            $vnode.componentInstance.keys.splice(pos, 1);
          }
        }
      }
    }
  }
}
</script>

在这个示例中，我们展示了如何根据路由配置来缓存页面组件。如果某个页面的 meta 信息中包含 keepAlive 属性，则表示该页面需要被缓存。我们通过 v-if 指令来根据路由来判断是否需要缓存当前页面组件。在 watch 中，我们监听了 $route 的变化，通过 wrapVnode 属性来获取 keep-alive 组件的虚拟节点信息，并使用 cache 和 keys 属性来进行缓存和移除。