简介
在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue
中使用异步组件也很简单:
// AsyncComponent.vue
<template>
<div>我是异步组件的内容</div>
</template>
<script>
export default {
name: 'AsyncComponent'
}
</script>
// App.vue
<template>
<div id="app">
<AsyncComponent v-if="show"></AsyncComponent>
<button @click="load">加载</button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
AsyncComponent: () => import('./AsyncComponent'),
},
data() {
return {
show: false,
}
},
methods: {
load() {
this.show = true
},
},
}
</script>
我们没有直接引入AsyncComponent
组件进行注册,而是使用import()
方法来动态的加载,import()
是ES2015 Loader 规范 定义的一个方法,webpack
内置支持,会把AsyncComponent
组件的内容单独打成一个js
文件,页面初始不会加载,点击加载按钮后才会去请求,该方法会返回一个promise
,接下来,我们从源码角度详细看看这一过程。
通过本文,你可以了解Vue
对于异步组件的处理过程以及webpack
的资源加载过程。
编译产物
首先我们打个包,生成了三个js
文件:
第一个文件是我们应用的入口文件,里面包含了main.js
、App.vue
的内容,另外还包含了一些webpack
注入的方法,第二个文件就是我们的异步组件AsyncComponent
的内容,第三个文件是其他一些公共库的内容,比如Vue
。
然后我们看看App.vue
编译后的内容:
上图为App
组件的选项对象,可以看到异步组件的注册方式,是一个函数。
上图是App.vue
模板部分编译后的渲染函数,当_vm.show
为true
的时候,会执行_c('AsyncComponent')
,否则执行_vm._e()
,创建一个空的VNode
,_c
即createElement
方法:
vm._c = function (a, b, c, d) { return createElement(vm, a, b, c, d, false); };