vue的keep-alive

keep-alive官网的解释和用法比较全面，其实仔细一想，大概就是保持组件的数据状态逻辑展现不变，不需要重新加载就可以再次使用的意思吧

仅记录一下简单的使用过程：

1.keep-alive基础使用方法

　　index页面：

<template>
    <div>
      <h2>{{msg}}</h2>
      <input placeholder="输入框"></input>
      <button @click="stepPage">跳转page页</button>
    </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        msg: "首页"
      }
    },
    methods:{
      stepPage(){
        this.$router.push('/page')
      }
    }
  }
</script>

　　page页面：

<template>
  <div>
    <h2>{{msg}}</h2>
    <button @click="stepIndex">跳转index页</button>
  </div>
</template>

<script>
  export default {
    name: "page",
    data(){
      return {
        msg:"page页"
      }
    },
    methods:{
      stepIndex(){
        this.$router.push('/index')
      }
    }
  }
</script>

　　router.js

{
    path: '/',
    component: Home,
    name: '测试',
    children: [
      {
        name: 'index',
        path: '/index',
        component: () => import('./pages/test/index'),
        meta: {keepAlive: true}
      },
      {
        name: 'page',
        path: '/page',
        component: () => import('./pages/test/page'),
        meta: {keepAlive: false}
      }
    ]
  }

　　home.vue

<div class="layout-content">
       <div class="layout-content-main">
            <keep-alive>
              <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
       </div>
</div>

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会分别激活和离开时被执行，进入index页面

 

 

 

 

2.动态组件与keep-alive使用

父组件：

<template>
    <div>
      <button @click="changeComp('One')">组件1</button>
      <button @click="changeComp('Two')">组件2</button>
      <button @click="changeComp('Three')">组件3</button>

      <!-- 三种配置使用，演示的时候页面单个使用单个演示-->

      <!-- include: 表示会缓存所写入的数组-->
      <keep-alive include= 'pageOne,pageTwo'>
        <!--动态组件 ，根据is的值来确定渲染哪个组件 -->
        <component :is="compId"></component>
      </keep-alive>

      <!-- exclude：表示不缓存所写入的组件-->
      <keep-alive exclude= 'pageOne,pageTwo'>
        <component :is="compId"></component>
      </keep-alive>

      <!--max：表示最大缓存组件的个数，其值等于当前组件加历史组件个数的和，如果这个数大于max的则缓存最近使用的max个组件。-->
      <keep-alive max= '2'>
        <component :is="compId"></component>
      </keep-alive>
    </div>
</template>

<script>
  import pageOne from './pageOne';
  import pageTwo from './pageTwo';
  import pageThree from './pageThree';

  export default {
    components:{
      pageOne,
      pageTwo,
      pageThree
    },
    name: "index",
    data() {
      return {
        compId: "pageOne"
      }
    },
    methods:{
      changeComp(type){
        this.compId = `page${type}`;
      }
    }
  }
</script>

pageOne组件：

<template>
  <div>
    <h2>组件1</h2>
    <input type="text">
  </div>
</template>

pageTwo组件：

<template>
  <div>
    <h2>组件2</h2>
    <input type="text">
  </div>
</template>

pageThree组件：

<template>
  <div>
    <h2>组件3</h2>
    <input type="text">
  </div>
</template>

单个演示：

 (1) include配置

切换tab输入数据，展现如下：

再点击不同的tab查看状态：

 由上可知，组件3没有缓存状态

(2) exclude

切换tab输入数据，展现如下：

再点击不同的tab查看状态：

  由上可知，组件1和组件2没有缓存状态

(3) max

切换tab输入数据，展现如下：

此时再切换组件1和组件2的时候，数据都存在，但是当切换组件3输入数据

再切换到组件1和组件2时，只有组件2有数据