Vue 动态组件与 v-once指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <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: '#app',
                data: {
                    type: 'child-one',
                },
                methods: {
                    handleBtnClick: function() {
                        this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                    }
                }
            })
        </script>
    </body>
</html>

component 标签就是动态组件。
通过动态组件也实现了上面的效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <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: '#app',
                data: {
                    type: 'child-one',
                },
                methods: {
                    handleBtnClick: function() {
                        this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                    }
                }
            })
        </script>
    </body>
</html>

<div id="app">
    <child-one v-if="type === 'child-one'"></child-one>
    <child-two v-if="type === 'child-two'"></child-two>
    <button @click="handleBtnClick">change</button>
</div>

这种方式切换的时候，都经过了创建、销毁的过程，导致性能不佳。为了解决频繁使用的组件经常创建、销毁这一操作，我们可以使用v-once指令。
通过v-once指令，我们可以把组件创建后缓存在内存里面，然后下次创建的时候就在内存里面找出来用上。

Vue.component('child-one', {
    template: '<div v-once>child-one</div>',
})
Vue.component('child-two', {
    template: '<div v-once>child-two</div>',
})

可以提高静态内容的展示效率。

Vue 动态组件 与 v-once指令

Vue 动态组件与 v-once指令