流程如下
vue源码中最终执行生命周期函数都是调用callHook方法,callHook函数的逻辑很简单,根据传入的生命周期类型 hook,去拿到 vm.$options[hook]对应的回调函数数组,然后遍历执行,执行的时候把 vm作为函数执行的上下文。
-
new Vue(options):创建一个vm实例;
-
mergeOptions(resolveConstructorOptions(vm.constructor), options, vm):合并Vue构造函数里options和传入的options或合并父子的options。比如:在mergeOptions函数中会调用mergeHook方法合并生命周期的钩子函数,mergeHook方法原理是只有父时返回父,只有子时返回数组类型的子。父、子都存在时,将子添加在父的后面返回组合而成的数组。这也是父子均有钩子函数的时候,先执行父的后执行子的的原因;
-
initLifecycle(vm)、initEvents(vm)、initRender(vm):在创建的vm实例上初始化生命周期、事件、渲染相关的属性;
-
callHook(vm, ‘beforeCreate’):调用beforeCreate生命周期钩子函数;
-
initInjections(vm)、initState(vm)、initProvide(vm):初始化数据:inject、state、provide。initState 的作用是初始化 props、data、methods、watch、computed 等属性;
-
callHook(vm, ‘created’):调用created生命周期钩子函数;
-
vm. m o u n t ( v m . mount(vm. mount(vm.options.el): mount方法在多个文件中都有定义,如"src/platform/web/entry-runtime-with-compiler.js"、“src/platform/web/runtime/index.js”、“src/platform/weex/runtime/index.js”。因为mount方法的实现是和平台、构建方式相关的。以"entry-runtime-with-compiler.js"为例,关键步骤是查看vm. o p t i o n s 中 是