当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。
看如下例子
<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>的,会组件实例会被缓存下来,所以会是黑色。