VUE-源码导读

断断续续耗费了近一个月的时间,将Vue-2.6版本的源码大致看了下。自己的理解,主要分两个部分,工具方法准备和Vue对象。

工具准备:

var strats = {};
var LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured',
  'serverPrefetch'
];
LIFECYCLE_HOOKS.forEach(function (hook) {strats[hook] = mergeHook;}); // 初始化钩子函数
var ASSET_TYPES = [
  'component',
  'directive',
  'filter'
];
ASSET_TYPES.forEach(function (type) {strats[type + 's'] = mergeAssets;}); // 初始化资产函数
strats.watch
strats.props
strats.methods 
strats.inject
strats.computed
strats.provide

Vue类:

Vue
	initMixin(Vue);
		Vue.prototype._init
			initLifecycle(vm); // 生命周期的初始化状态设置
				vm.$parent = parent;
				vm.$root = parent ? parent.$root : vm;
				vm.$children = [];
				vm.$refs = {};
				vm._watcher = null;
				vm._inactive = null;
				vm._directInactive = false;
				vm._isMounted = false;
				vm._isDestroyed = false;
				vm._isBeingDestroyed = false;
			initEvents(vm);
				updateComponentListeners(vm, listeners); // 更新父组件的事件 
			initRender(vm);
				defineReactive$$1(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true); // 定义响应式属性
				defineReactive$$1(vm, '$listeners', options._parentListeners || emptyObject, null, true);  // 定义响应式监听
			callHook(vm, 'beforeCreate');
				vm.$emit('hook:' + hook); // 通过事件机制触发钩子函数
			initInjections(vm); // resolve injections before data/props
			initState(vm);
				initProps(vm, vm.$options.props);  //初始化属性
				initMethods(vm, vm.$options.methods); // 初始化方法
				initData(vm); // 初始化数据
				initComputed(vm, vm.$options.computed); // 初始化计算属性
				initWatch(vm, vm.$options.watch); // 初始化监听属性
			initProvide(vm); // resolve provide after data/props
			callHook(vm, 'created');
	stateMixin(Vue);
		定义原型属性$data、$props,定义原型方法$watch
	eventsMixin(Vue);
		定义原型方法$on、$once、$off、$emit
	lifecycleMixin(Vue);
		定义原型方法_update、$forceUpdate、$destroy
	renderMixin(Vue);
		installRenderHelpers(Vue.prototype); // install runtime convenience helpers
		定义原型方法$nextTick、_render
		_render
			normalizeScopedSlots(_parentVnode.data.scopedSlots,vm.$slots,vm.$scopedSlots);
	initGlobalAPI(Vue);	 // 全局API定义
		initUse(Vue); // 定义全局方法Vue.use
		initMixin$1(Vue); //定义全局方法Vue.mixin
		initExtend(Vue); // 定义类继承
		initAssetRegisters(Vue); // 组件、指令、过滤器方法定义
		
	// install platform specific utils
	Vue.config.mustUseProp = mustUseProp;
	Vue.config.isReservedTag = isReservedTag;
	Vue.config.isReservedAttr = isReservedAttr;
	Vue.config.getTagNamespace = getTagNamespace;
	Vue.config.isUnknownElement = isUnknownElement;
	extend(Vue.options.directives, platformDirectives); // install platform runtime directives
	extend(Vue.options.components, platformComponents); // install platform runtime components

你可能感兴趣的:(WEB前端,Vue源码)