vue开发过程中,我们会做出特别多特别多的组件,包括login,header,footer,main等等。
这样使整个网站看起来就十分的庞大,当我们在打开网页的时候,突然一下子把这些所有的组件加载上来,这么多的请求全部同时开始请求,势必会造成网页打开很慢,使客户得到的是非常差劲的体验。

因此,vue为我们专门设立了异步组件,通过异步组件,我们可以得到两点好处:
1 用不到的组件不会加载,因此网页打开速度会很快,当你用到这个组件的时候,才会通过异步请求进行加载;
2 缓存组件,通过异步加载的组件会缓存起来,当你下一次再用到这个组件时,丝毫不会有任何的疑迟,组件很快会从缓存中加载出来。

vue鼓励我们在vue中使用函数来标志component属性的值。通常我们有两种方式可以实现异步的组件:

    //在组件中,我们通过在components属性中使用import()函数返回一个
    //promise
    components: {
      'hot-component': () => import('./HotComponent.vue'),
      'nav-component': () => import('./NavComponent.vue')
    },


    //在router中,我们也可以这么做,但也可以使用nodejs的require函数来实现
    //返回一个resolve
    {
      path:'/login',
      name:'login',
      component:(resolve) => {
          require(['../components/LoginComponent.vue'],resolve)
      }
      //LoginComponent
    },

总结说来,就是目前有两种语法形式:

    1 component: () => import('/component_url/');
    2 component: (resolve) => {
        require(['/component_url/'],resolve)
      }

但目前看来,还是第一种语法用起来比较直观。
可以用到异步组件的地方:
1 组件中,组件中需要子组件的位置,我们就可以使用异步组件形式
2 路由中,一般我们打开一个页面时,其总是会进入其中一个默认的路由,那么其他路由在用不到的时候就没必要继续加载,当跳转到当前路由的时候,再来加载,这里也是使用异步组件非常恰当的地方。

Logo

前往低代码交流专区

更多推荐