vue之keep-alive

<keep-alive> 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

KeepAlive用于处理组件缓存。有什么用呢？想象一个业务场景：

在Login页面填写完手机号，发现未注册，需要跳去Register页面完成注册，再返回Login页面填写密码，进行登录，此时如果在Login页面没有保存好手机号，那么跳回来时，用户又得重新输入手机号。为了解决这样的需求，我们需要借助keep-alive。

1、keep-alive结合component

首先，创建 a.vue、b.vue 和 c.vue 三个组件，内容大致如下：

<template>
  <li>a组件 <input type="text"></li>
</template>

在某个页面（如：about.vue）中引入：

<template>
  <div class="about">
    <button @click="mycom='acom'">a组件</button>
    <button @click="mycom='bcom'">b组件</button>
    <button @click="mycom='ccom'">c组件</button>
    <ul>
      <component :is="mycom"></component>
    </ul>
  </div>
</template>

<script>
import acom from '../components/a'
import bcom from '../components/b'
import ccom from '../components/c'

export default {
  data(){
    return {
      mycom: "acom"
    }
  },
  components: {
    acom, bcom, ccom
  }
}
</script>

到目前为止，我们可以切换组件，但是在切换时却无法缓存组件内容，因此我们给 component 组件套一个 keep-alive：

<keep-alive>
   <component :is="mycom"></component>
</keep-alive>

这样我们在三个组件的 input 中输入的东西就会被缓存。

2、include与exclude

如果我们想缓存指定的组件，可以使用include：

<keep-alive :include="['acom', 'bcom']">
   <component :is="mycom"></component>
</keep-alive>

如果我们想排出部分组件的缓存，可以使用exclude：

<keep-alive :exclude="['ccom']">
   <component :is="mycom"></component>
</keep-alive>

3、keep-alive生命周期

Keep-alive 生命周期包含：actived 和 deactivated

找到 a.vue，写入：

<script>
export default {
    created(){
        console.log('a组件的created')
    },
    mounted(){
        console.log('a组件的mounted')
    },
    activated(){
        console.log('actived: 进入当前组件时触发')
    },
    deactivated(){
        console.log('deactivated：离开当前组件时触发')
    }
}
</script>

我们可以观察到两个现象：

• actived在created和mounted之后调用
• deactivated在离开组件时会触发，无论第几次进入组件，actived都会触发，但created和mounted只会触发一次