动态组件component与v-once指令

动态组件

比如我们有个需求，2个组件a和b，第一次点按钮显示a，第二次显示b，第三次a，依次循环下去

<div id="app">
      <child-one v-show="show==='child-one'"></child-one>
      <child-two v-show="show==='child-two'"></child-two>
      <button @click="handleClick">按钮</button>
</div>
<script>
      Vue.component("child-one",{
        template:'<p>child-one</p>'
      })
      Vue.component("child-two",{
        template:'<p>child-two</p>'
      })
      new Vue({
        el:'#app',
        data:{
          show:'child-one'
        },
        methods:{
          handleClick(){
            this.show=(this.show==='child-one'?'child-two':'child-one')
          }
        }
      })
</script>

上面是我们一般的写法，其实还有一种写法，代码更简洁，那就是用动态组件

<div id="app">
      <component :is="show"></component>
      <button @click="handleClick">按钮</button>
</div>
<script>
      Vue.component("child-one",{
        template:'<p>child-one</p>'
      })
      Vue.component("child-two",{
        template:'<p>child-two</p>'
      })
      new Vue({
        el:'#app',
        data:{
          show:'child-one'
        },
        methods:{
          handleClick(){
            this.show=(this.show==='child-one'?'child-two':'child-one')
          }
        }
      })
</script>

component标签是vue中自带的标签，它指的就是动态组件，它有一个属性:is，我们给这个属性赋值show。动态组件会根据is中数据的变化，加载不同的组件。
每次创建的时候，底层都是销毁一个组件再创建一个组件，这样是耗费性能的，如果我们的组件每次都一样，我们可以在组件上加v-once指令

v-once指令

<div id="app">
      <component :is="show"></component>
      <button @click="handleClick">按钮</button>
    </div>
    <script>
      Vue.component("child-one",{
        template:'<p v-once>child-one</p>'
      })
      Vue.component("child-two",{
        template:'<p v-once>child-two</p>'
      })
      new Vue({
        el:'#app',
        data:{
          show:'child-one'
        },
        methods:{
          handleClick(){
            this.show=(this.show==='child-one'?'child-two':'child-one')
          }
        }
      })
    </script>

v-once的意思就是当child-one第一次创建的时候，把它放倒内存里，点击按钮切换到child-two，当child-two第一次创建的时候，把他放到内存里，再点击按钮又切换到child-one，这是child-one第二次呈现出来，此时就不是重新创建了，是从内存里面把他弄出来，读取他保存在内存中的数据。
在vue中使用v-once可以提高一些静态内容的展示效率