初识vue 2.0（11）：使用keep-alive缓存组件

vue 2.0 提供了一个keep-alive组件来缓存不活动的组件实例,而不是销毁它们。避免多次加载相应的组件,减少性能消耗。

它是一个抽象组件，自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

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

2.1.0 新增 include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。

匿名组件不能被匹配。

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

主要用于保留组件状态或避免重新渲染。例如在点击浏览器返回按钮时，保留现场：

1. 填写多步骤表单，下一步后、返回按钮，保留现场
2. 多tab来回切换，保留现场

例子：

1. 在App.vue中定义keep-alive组件，并指定只允许Hello组件缓存，并通过路由的方式切换组件。

<template>
    <div id="root">
        <keep-alive include="Hello">
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

2. 定义Hello.vue组件，创建缓存现场。

<template>
    <div class="hello">
        <span @click="update">{{ msg }}</span>
        <router-link to="Game">Game</router-link>
    </div>
</template>
<script>
export default {
    name: 'Hello',
    data () {
        return {
            msg:"Hello"//原始数据
        }
    },
    methods: {
        update(){
            this.msg = 'Hello world';//更改数据
        }
    },
    created(){
        console.log(1);
    },
    mounted(){
        console.log(2);
    },
    activated(){
        console.log('in');
    },
    deactivated(){
        console.log('out');
    }
}
</script>

<style>
.hello{
  background-color:#E1FFFF;
}
</style>

3. 定义Game.vue组件，配合组件切换，以演示效果。

<template>
    <div class="game">
        <span>{{ msg }}</span>
        <router-link to="/">Hello</router-link>
    </div>
</template>
<script>
export default {
    name: 'Game',
    data() {
        return {
            msg: 'Game'
        }
    }
}
</script>
<style lang="css">
.game{
    border: 1px solid #00FF00;
    width: 200px;
}  
</style>

4. 定义路由文件router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Game from '../components/Game'
import Hello from '../components/Hello'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/game',
      name: 'Game',
      component: Game
    }
  ]
})

注意name的大小写要一致。

 

参考：https://cn.vuejs.org/v2/api/#keep-alive