component 动态渲染组件
使用<component v-bind:is="xxxComponent"></component>来动态渲染组件

使用方式：

 <keep-alive>
<component :is="myComponent"></component>
</keep-alive>

   Vue.component("briup-success",{template:`<div style="width: 200px;height: 200px;background-color: lightgreen;"><div>SUCCESS</div></div>`,})Vue.component("briup-error",{template:`<div style="width: 200px;height: 200px;background-color:red;"><div>ERROR</div></div>`,})new Vue({el:"#app",data:{myComponent:"briup-success"},methods:{changeSuccess(){this.myComponent="briup-success"},changeError(){this.myComponent="briup-error"},changeComponent(){var mC=this.myComponent;var that=this;if(mC==="briup-success"){that.myComponent="briup-error"}else{that.myComponent="briup-success"}}}})

默认情况下，当组件发生切换的时候，组件会被重新创建
我们希望能够把被切换的组件缓存下来（在他第一次创建的时候就缓存下来）
为了解决这个问题，可以使用将动态组件包裹起来 失活的组件就被缓存下来了