断断续续耗费了近一个月的时间,将Vue-2.6版本的源码大致看了下。自己的理解,主要分两个部分,工具方法准备和Vue对象。 工具准备:
var strats = {};
var LIFECYCLE_HOOKS = [
'beforeCreate',
'created',
'beforeMount', 需要学习python的加扣裙:821871075
'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