Vue异步组件使用的有2种方法

异步组件使用 有2种方法 大家直接看代码

1. 采用类似function(suucess,error){}函数注册

 import Second from '../components/second';
 Vue.component('syncCmp',function(success,err){
  setTimeout(()=>{
    success(Second);//或是 success({template:'
异步组件
'})
    },5000);
 });

2. 注册一个返回Promise的函数

Vue.component('syncCmp', ()=>{
return new Promise((success,error)=>{
    setTimeout(()=>{
     success({template:'
异步组件<
'})
    },5000);
});

});

3.两者的区别

a.1方法 require加载组件可以 import加载组件不行

    //require加载组件能够执行成功 
  Vue.component('syncCmp',function(rr ,ee) {
  setTimeout(()=>{
   rr(  require('./components/second'));    
   },
 5000); 
  }); 

 //import加载组件会失败
Vue.component('syncCmp',function(rr ,ee) {
setTimeout(()=>{
    rr(import('./components/second'));
},
 5000)});

b. 2方法 import require都能够成功

Vue.component('syncCmp', ()=>{
return new Promise((rr,ee)=>{
    setTimeout(()=>{
        let aaa=import('./components/second');
        rr(aaa);
    },5000);
   });
    });

 Vue.component('syncCmp', ()=>{
  return new Promise((rr,ee)=>{
    setTimeout(()=>{
        let bbb=require('./components/second');
        rr(bbb);
    },5000);
});
});

4.import 和require的区别

image.png

说明import()返回一个promise对象 require返回一个普通对象 说明1方法只对普通组件对象做了兼容 2方法对两种对象都做了兼容