當在這些元件之間切換的時候，你有時會想保持這些元件的狀態，以避免反覆重渲染導致的效能問題。

看如下例子

    <div id="app">
        <div class='container'>
            <div class='row'>
                <button class='btn btn-default' v-on:click='changeShow' >change-page </button>
                 <component v-bind:is='show'   ></component>
            </div>
        </div>
    </div>
 

new Vue({
     el:"#app",
     data:{
         show:'pageFirst',
     },
     components:{
         pageFirst:{
            data:function () {
               return { showColor:'red',}
            },
             template:`
                 <div  v-bind:style="{ backgroundColor:showColor,width:'60px',height:'60px'}"  v-on:click='changeColor'></div>
             `,
             methods: {
                 changeColor:function() {
                     if ( this._data.showColor=='red')  this._data.showColor='black';
                     else  this._data.showColor='red';
                 }
             }
         },
         pageSecond:{
             template:`
                 <div>222</div>
             `
         }
     },

     methods:{
         changeShow:function() {
             if (this.show==='pageFirst') this.show='pageSecond';
             else this.show='pageFirst';
         },
         
     }
 })
 

我們通過一個按鈕來切換模板。

第一個模板是一個帶背景顏色的正方形，我們可以通過點選背景來改變顏色（預設為紅色）

第二個模板是222

點選div,點選按鈕點選按鈕

然後我們在component外面加上一層<keep-alive>

                <keep-alive>  <component v-bind:is='show'   ></component></keep-alive>

進行同樣操作。

點選div,點選按鈕點選按鈕

通過這個簡單例子，我們可以知道沒有加上<keep-alive>的，每一次都會重新渲染，所以會是預設的紅色。

加上<keep-alive>的，會元件例項會被快取下來，所以會是黑色。