关于异步组件的部分

Vue的异步组件

用法解释

首先上官网说明。 —— [ 异步组件 ]

虽然官网有介绍，但是感觉不太适合新手，自己最开始看的时候也是一脸懵逼。
它只是做了概念的介绍，详细的使用方法和技巧并没有说明。

【1】官方示例

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // Pass the component definition to the resolve callback
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})  

工厂函数接收一个 resolve 回调，在收到从服务器下载的组件定义时调用。也可以调用 reject(reason) 指示加载失败。这里 setTimeout 只是为了演示。怎么获取组件完全由你决定。

【2】官方示例实际使用

假如你写一个test.vue文件，在

//test.vue的部分
<script>
    import Vue from 'vue'

    //关键是以下这部分代码
    //需要将引入的异步组件，赋值给变量searchSearch
    //然后在下方components对象里，将变量正常添加进去，就可以使用异步组件了
    //第一个参数是组件名，第二个是异步引入的方法
    const searchSearch = Vue.component('searchSearch', function (resolve) {
        require(['./service-search.vue'], resolve)
    })

    export default{
        data(){
            return {}
        },
        methods: {},
        components: {
            searchSearch: searchSearch
        }
    }
</script>

【3】更简单的异步组件的使用方法

<script>
    export default{
        data(){
            return {}
        },
        methods: {},
        components: {
            searchSearch: function (resolve) {
                //异步组件写法
                require(['./service-search.vue'], resolve)
            }
        }
    }
</script>

其实只要在searchSearch中异步引入就可以，也就是searchSearch当作一个函数

后续

异步并不一定能提高系统性能，甚至因为线程的创建，消亡，和切换会增加系统开销，但异步除了提高性能，还可以增强系统的健壮性。因此在如何使用异步、怎么使用异步还需多方面考虑。