vue源码调试vue初始化过程

给四个导出vue的文件上面打断点

以下都是举例关键点 无调试过程 可参照例子自行调试

src/core/instance/index

• 通过在右侧watch中点击加号 然后输入Vue 来监听断点执行过程中vue的变化
• 当执行initMixin的时候 右侧vue中如下所示
  
• 当执行到stateMixin的时候可以看到Vue的原型上多了个_init函数
  

src/core/index

• 给vue的构造函数中增加了一个config属性&＃xff0c;这个属性中都是与平台相关的成员
• 给vue.util中增加了一些方法&＃xff0c;这些方法不建议使用 更多在vue源码内部使用的
• 增加了静态的方法 set、delete、nextTick
• 初始化了observable
• 初始化了options并给其__proto__设置为null&＃xff0c;然后在options对象中追加了components/directives/filters这几个成员&＃xff0c;存储全局的组件、指令及过滤器&＃xff0c;以及_base(存储vue的构造函数)
  -在vue的构造函数中 注册了use mixin extend这几个函数及component、directive、filter这几个函数&＃xff0c;当我们调用这几个函数的时候他们会把对应的组件、指令、过滤器放在options中对应的成员中
  

src/platforms/web/runtime/index

src/platforms/web/entry-runtime-with-compiler

• 重写了上个文件中定义的$mount方法\&＃xff0c;在$mount中新增了把我们模板编译为render函数的功能
• 执行 到最后又给Vue构造函数上面增加了compile方法&＃xff0c;这个方法的作用是让我们手工把模板转成render函数