1. Dynamic components

Dynamic components can realize the switching between components. First, let's see an example of component switching display without dynamic components

<div id="root">
        <child-one v-if="type==='child-one'"></child-one>
        <child-two v-if="type==='child-two'"></child-two>
        <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>

Results:

Use dynamic component: bind is feature to switch different components, as shown in the following example

<div id="root">
        <component :is="type"></component> <!--Using dynamic components-->
        <!--<child-one v-if="type==='child-one'"></child-one>-->
        <!--<child-two v-if="type==='child-two'"></child-two>-->
        <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>

Results:

2,v-once

No expression required

Rendering ordinary HTML elements is very fast in Vue, but sometimes you may have a component that contains a lot of static content. In this case, you can add the v-once feature to the root element to ensure that the content is only evaluated once and then cached. Render elements and components only once. With subsequent re rendering, the element / component and all its child nodes are treated as static content and skipped. This can be used to optimize update performance.

The above example can be modified as follows:

<div id="root">
        <component :is="type"></component>        
        <button @click="handleBtnClick">change</button>
    </div>
    <script>
        Vue.component('child-one',{
            template: '<div v-once>child-one</div>'<--!Use v-once Instructions, optimizing performance>
        })
        Vue.component('child-two',{
            template:'<div v-once>child-two</div>'<--!Use v-once Instructions, optimizing performance>
        })
        var vm=new Vue({
            el: '#root',
            data:{
                type: 'child-one'
            },
            methods: {
                handleBtnClick: function () {
                    this.type=(this.type==='child-one'?'child-two':'child-one');
                }
            }
        })
    </script>