Vue 动态组件和异步组件

基础案例

动态组件切换类比“bilibili-个人中心”的横向菜单切换不同的标签页的功能。

在Vue中可以使用 component 标签，并加一个特殊的属性（attribute） is来实现动态组件的切换。is需要一个组件的名称才能实现切换。

<div id="app">
    <!-- 点击按钮，切换is的值 -->
    <button @click="change">切换组件</button>
    <!-- 绑定is，给一个组件名称 -->
    <component v-bind:is="components[index]"></component>
</div>
<script>
    Vue.component('student-list', {
        // 省略...
    })

    Vue.component('teacher-list', {
        // 省略...
    })

    let vm = new Vue({
        el: '#app',
        data: function () {
            return {
                index: 0,
                components: ['student-list', 'teacher-list']
            }
        },
        methods: {
            change() {
                this.index++
                if (this.index === this.components.length) this.index = 0
            }
        }
    })
</script>

在浏览器中的效果：

keep-alive

当在这些组件之间切换的时候，有时会想保持这些组件的状态，希望组件实例能够被在它们第一次被创建的时候缓存下来，以避免反复重渲染导致的性能问题，那么就可以在component外面加一层keep-alive标签。

<div id="app">
    <button @click="change">切换组件</button>
    <!-- keep-alive保持组件的状态 -->
    <keep-alive>
        <component v-bind:is="components[index]"></component>
    </keep-alive>
</div>
<script>
    Vue.component('user-signin', {
        // 省略...
    })

    Vue.component('user-signup', {
        // 省略...
    })

    let vm = new Vue({
        el: '#app',
        data: () => {
            return {
                index: 0,
                components: ['user-signin', 'user-signup']
            }
        },
        methods: {
            change() {
                this.index++
                if (this.index === this.components.length) this.index = 0
            }
        }
    })
</script>

在浏览器中的效果：

在component标签外套上一层keep-alive之后再切换组件，就不会失去之前的输入状态。

异步组件

应用程序功能不停地增加，核心页面承载太多的组件，如果一次性需要渲染所有的组件，会花费大量时间去做这项工作，这会大大降低用户的体验和心情。我们可能只在需要的时候才从服务器加载一个组件。

<div id="app">
    <compo-one></compo-one>
    <compo-two></compo-two>
</div>
<script>
    const compoOne = {
        name: 'compo-one',
        template: `<h1>compo-one</h1>`
    }

    let vm = new Vue({
        el: '#app',
        components: {
            compoOne,
            // 在局部组件中使用工厂函数方式定义组件
            compoTwo: (resolve, reject) => {
                setTimeout(() => {
                    // 定义模板内容
                    resolve({
                        template: '<h2>compoTwo加载完成，用时1秒</h2>'
                    })
                }, 1000)
            }
        }
    })
</script>

在浏览器中的效果：