vue源码赏析三（Vue初始化及实现）

1. Vue定义及初始化（src/core/instance/index.js）
   img1
   Vue构造函数中只有一个方法 this._init(options)，经查找，这个方法是在 initMixin(Vue) 中定义的。

2. initMixin(Vue) （src/core/instance/init.js）
   img2
   看参数Vue是Component类型，找到Component定义的地方（flow/component.js）
   img3
   Component是接口，被放在flow文件夹里。这里面主要初始化了一些属性和方法，像 $el、$data、$props......这些就是Vue里面经常用到的属性

img2中1、2都是对选项进行一些合并等处理

img4
这里 initProxy 方法定义在 src/core/instance/proxy.js。主要是初始化vm的属性 _renderProxy,非生产环境提供提示。主要解析看这里

https://segmentfault.com/a/1190000014824359

img5

• initLifecycle： 处理parent、children等
• initEvents：事件监听初始化
• initRender： 定义$creatElement
• callHook： 执行用户自定义的钩子函数
• initInjections：获取注入数据并做响应化
• initState： 初始化props、methods、data、computed、watch。
• initProvide： 注入数据处理
  具体解析待处理（TODO）

3. stateMixin(Vue) （src/core/instance/state.js）
   img6
   实现$data、$props、$set、$delete、$watch 具体解析待处理（TODO）

4. eventsMixin(Vue) （src/core/instance/events.js）
   img7
   实现$on、$once、$off、$emit 具体解析待处理（TODO）

5. lifecycleMixin(Vue) （src/core/instance/lifecycle.js）
   img8
   实现$forceUpdate、$destory 具体解析待处理（TODO）

6. renderMixin(Vue) （src/core/instance/render.js）
   img9
   实现$nextTick，还有内部方法_render 具体解析待处理（TODO）

7. 以上可以看出，src/core/instance 目录下，index.js 中的 initMixin（init.js） 主要是初始化，其余方法主要是具体实现
   img10