阅读数:104 评论数:0

一、概念

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition相似，keep-alive是一个抽象组件，它自身不会渲染成一个DOM元素，也不会出现在父组件链中。

1、作用

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

2、原理

在created函数调用时将需要缓存的VNode节点（虚拟DOM，其实就是JS对象）保存在this.cache中，在render时，如果VNode的name符合缓存条件（可以用Include以及exclude控制），则会从this.cache中取出之前缓存的VNode实例进行渲染。

3、属性

（1）include 字符串或正则表达式，只有匹配的组件会被缓存。

（2）exclude 字符串或正则表达式，匹配的组件不会被缓存。

（3）max 数字，最多可以缓存多少个组件实例。

二、生命周期函数

1、activated

在keep-alive组件被激活时调用

2、deactived

在keep-alivee组件停用时调用

三、使用示例

1、缓存所有页面

在App.vue里面

<template>
  <div id="app">
    <keep-alive>
        <router-view />
    </keep-alive>
  </div>
</template>

2、根据条件缓存页面

<template>
  <div id="app">
    <keep-alive include='test'>
      <router-view />
    </keep-alive>
  </div>
</template>

3、结合Router，缓存部分页面

（1）router目录下的index.js文件里

...
routers : [
  {
    path: '/',
    name: 'home'
    component: Home,
    children: [
     {
       path: 'goods'
       name: 'goods',
       component: Goods
       meta: {
         keepAlive: false
       }
     }
    ]
  }
]

（2）在App.vue里面

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