Vue.js - 在动态组件上使用 keep-alive

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

看如下例子

    <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>的，会组件实例会被缓存下来，所以会是黑色。