keep-alive

• 动态组件 is

<template>

  <div>

     // 按钮，用于切换组件。注意,此时的A为字符串而非变量

    <button @click="showWhat = 'A'">showA</button>

    <button @click="showWhat = 'B'">showB</button>

    // 动态切换显隐，组件

    <component :is="showWhat"></component>

  </div>

</template>

 

<script>

//引入组件A以及组件B

import A from "./a";

import B from "./b";

export default {

  components: {

    //声明组件A,B

    A,

    B

  },

  data() {

    return {

      //默认显示组件A，若字符串为B则显示组件B,name为component声明

      showWhat: "A"

    };

  }

};

</script>

 

<style>

</style>

 

• 用keep-alive 缓存动态组件

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题

<keep-alive>

  <component v-bind:is="currentTabComponent"></component>

</keep-alive>

 

• keep-alive的生命周期

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

 

初次进入时：created > mounted > activated；退出后触发 deactivated

再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

 

• 应用

如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验，菜单存在多级关系，多见于列表页+详情页的场景如：

商品列表页点击商品跳转到商品详情，返回后仍显示原有信息

订单列表跳转到订单详情，返回，等等场景。

 

• Props：
  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。

 

<keep-alive :include="['a', 'b']" :max="10">

  <component :is="view"></component>

</keep-alive>