目录结构:
![](https://img.haomeiwen.com/i16796660/4a377e0e7a1f7818.png)
compiler 模板解析的相关文件
core 核心代码
platforms 平台相关的内容
server 服务端渲染相关
sfc 对.vue文件解析,分成template,script,styles,customblocks,errors几部分
shared 共享的工具方法
vm从创建到显示:
![](https://img.haomeiwen.com/i16796660/f72fa23e313b033d.png)
创建vue对象,判断是否是通过new关键字添加(core/instance/index)
![](https://img.haomeiwen.com/i16796660/e0e4e03d1cfaf396.png)
执行初始化方法(core/instance/init)
![](https://img.haomeiwen.com/i16796660/19e9056fddd56fa9.png)
vm添加了一个唯一的_uid,然后vm._isVue设为true,_isComponent是内部创建子组件时才会添加为true的属性,内部initInternalComponent(vm, options),
else执行mergeOptions,该方法用于合并两个对象,resolveConstructorOptions方法在Vue.extend中做了详细的解释,它的作用是合并构造器及构造器父级上定义的options,给Vue添加了一些全局的属性或方法。
![](https://img.haomeiwen.com/i16796660/f29e0b81ad9c4fa9.png)
vue处理属性合并方法(core/util/options)
![](https://img.haomeiwen.com/i16796660/0b1c1ef94c4e435b.png)
initLifecycle(vm):给对象添加钩子函数
initEvents(vm):初始化时间属性
initRender(vm):添加虚拟dom
initInjections(vm)和initProvide(vm):父子属性注入
initState(vm)初始化状态
网友评论