1,根据vue工程package.json配置文件查看scripts命令,找到build命令执行的js文件
2,根据构建执行的js文件继续跟进,找到主入口文件
3,从主入口文件直接分析主干代码,追踪export的Vue对象
4,跟进到最内层,发现Vue对象其实就是一个构造函数,构造函数内调用了_init()方法。因此在我们new Vue(options)的时候,实例化Vue执行就会调用此方法
5,在vue加载完成之后,初始化了initMixin, stateMixin, eventsMixin, lifecycleMixin, renderMixin这5个方法
6,initMixin中定义了_init函数,这个函数的核心流程是:
合并options配置挂载到vm.$options;
调用initLifecycle初始化vm.$parent, vm.$root, vm.$children, vm.$refs 等属性值;
调用initEvents初始化事件系统,实际上是v-on和@的注册的事件;
调用initRender初始化渲染,通过执行createElement函数执行并返回虚拟DOM;
调用beforeCreate钩子;
调用initInjections函数初始化父子组件的inject和provide(二者成对出现);
调用initState初始化state, props, methods, computed, watch等,将data, props都挂载到vm._data, vm._props上,设置访问数据代理,访问this.xx就是访问vm.xx;
调用initProvide函数,同initInjections;
调用created钩子。
7,stateMixin中,对_data(vm.$data), _props(vm.$props)使用 Object.defineProperty 添加响应式
8,eventsMixin中,在Vue原型上定义$on, $once, $off, $emit 事件方法,并返回vm
9,lifecycleMixin中,在Vue原型上定义 _update, $forceUpdate, $destroy方法
10,renderMixin中,在Vue原型上定义$nextTick方法和_render方法(该方法会调用vm.$createElement创建虚拟DOM)