vue异步组件
vue开发过程中,我们会做出特别多特别多的组件,包括login,header,footer,main等等。这样使整个网站看起来就十分的庞大,当我们在打开网页的时候,突然一下子把这些所有的组件加载上来,这么多的请求全部同时开始请求,势必会造成网页打开很慢,使客户得到的是非常差劲的体验。因此,vue为我们专门设立了异步组件,通过异步组件,我们可以得到两点好处:1 用不到的组件不会加载,因此
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 路由中,一般我们打开一个页面时,其总是会进入其中一个默认的路由,那么其他路由在用不到的时候就没必要继续加载,当跳转到当前路由的时候,再来加载,这里也是使用异步组件非常恰当的地方。
更多推荐
所有评论(0)