学习vue源码（17）再探生命周期之初始化实例属性及事件

在前一篇文章学习vue源码（16）初探生命周期各阶段都在干嘛

Vue.js生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段、卸载阶段。

而初始化阶段又可分为

在Vue.js实例上初始化一些属性、事件以及响应式数据，如props、methods、data、computed、watch、provide和inject等。

这一次，我们就来探究第一阶段：初始化阶段的属性、事件,如代码所示，研究initLifecycle，initEvents，initRender。都干了什么。这件这三个初始化 都在beforeCreate钩子函数触发前初始化的。

Vue.prototype._init = function(options){
   
	vm.$options = mergeOptions(
		resolveConstructorOptions(vm.constructor),
		options || {
   },
		vm
	)
 
	initLifecycle(vm);
	initEvents(vm);
	initRender(vm);
	callHook(VM,'beforeCreate');
	initInjections(vm);//在data/props前初始化inject
	initState(vm);
	initProvide(vm);//在data/props前初始化provide
	callHook(vm,'created');
 
	if(vm.$options.el){
   
		vm.$mount(vm.$options.el);
	}
}

一、初始化实例属性

在Vue.js的整个生命周期中，初始化实例属性是第一步。

需要实例化的属性既有Vue.js内部需要用到的属性（如vm._watcher），也有提供给外部使用的属性（例如vm.$parent）。

以$开发的属性是提供给用户使用的外部属性，以_开头的属性是提供给内部使用的内部属性。

Vue.js通过initLifecycle函数向实例中挂载属性，该函数接收Vue.js实例作为参数。所以在函数中，只需要向Vue.js实例设置属性即可达到向Vue.js实例挂载属性的目的。

（5）实现

export function initLifecycle(vm){
   
	const options = vm.$options;
	//找出第一个非抽象父类
	let parent = options.parent;
	if(parent&&!options.abstract){
   
		while(parent.$options.abstract&&parent.$parent){
   
			parent = parent.$parent;
		}
		parent.$children.push(vm);
	}
	vm.$parent = parent;
	vm