动态组件与v-once指令

动态组件

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>