动态组件
Vue内置<component :is="name"></component>根据is属性绑定Vue实例中data里面对应的数据名，动态切换组件，然后自动加载不同组件。
<body> <div id="root"> <!-- <child-one v-if="type===‘child-one‘"></child-one> <child-two v-else="type===‘child-one‘"></child-two>--> <component :is="type"></component> <button @click="handleBtnClick">change</button> </div> <script> Vue.component(‘child-one‘,{ template:‘<div>child-one</div>‘ }) Vue.component(‘child-two‘,{ template:‘<div>child-two</div>‘ }) var vm=new Vue({ el:‘#root‘, data:{ type:‘child-one‘ },methods:{ handleBtnClick:function(){ this.type=(this.type===‘child-one‘?‘child-two‘:‘child-one‘); } } }) </script> </body>
v-once指令
会将第一次展示在页面中的资源保存在内存中，下一次直接加载缓存（内存中的资源），提高静态内容的展示效率。
<body> <div id="root"> <child-one v-if="type===‘child-one‘"></child-one> <child-two v-if="type===‘child-two‘"></child-two> <!-- <component :is="type"></component> --> <button @click="handleBtnClick">change</button> </div> <script> Vue.component(‘child-one‘,{ template:‘<div v-once>child-one</div>‘ }) Vue.component(‘child-two‘,{ template:‘<div v-once>child-two</div>‘ }) var vm=new Vue({ el:‘#root‘, data:{ type:‘child-one‘ },methods:{ handleBtnClick:function(){ this.type=(this.type===‘child-one‘?‘child-two‘:‘child-one‘); } } }) </script> </body>
原文：https://www.cnblogs.com/tengteng0520/p/12071579.html