vue源码分析-组件化-异步组件

Posted on | In

异步组件，一般用于按需加载。对于一些需要优化首屏加载的，会减少首屏的包体积，一般会将一些首屏组件变成异步组件。异步组件的实现方式有三种：工厂函数，promise异步组件，高级异步组件。

工厂函数

1
2
3
4
5
6
Vue.component('AysnComponent', function (resolve, reject) {
	// 这个特殊的require语法会告诉webpack，自动将编译后的代码分割成不同的块，这些块会通过Ajax请求加载
	require(['./components/AysnComponent'], (res) => {
		resolve(res)
	})
})

在定义组件时，使用Vue.component时，第二个参数传递的是一个对象。在这里，定义异步组件的时候，第二个参数传递的是一个函数。
在vue的源码中，会判断传递的第二个参数是否是一个普通的对象，如果是，则会使用extend来创建一个Ctor构造函数。如果不是，则直接将传递的参数挂载在Vue.options.components.AysnComponent（其中的AynsComponent就是定义的名称），通过resolveAsset来创建一个Ctor，这里的Ctor其实就是一个工厂函数（也就是我们传递进去的函数），通过函数resolveAyscComponent(Ctor, baseCtor, context)「其实，Ctor就是我们传递的函数，baseCtor就是Vue，context当前组件的实例vm」

———————————————————————— 华丽的分割线 —————————————————————

「扩展 1 」：once，方法只执行一次的实现方式？

1
2
3
4
5
6
7
8
9
function once (fn: Function): Function {
	let called = true
	return function () {
		if (!called) {
			called = false
			fn.apply(this, arguments)
		}
	}
}