Vue源码总结

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）