入口文件
文件路径:src/platforms/web/entry-runtime-with-compiler.js
结论是不管用户用el还是template设置模板
最终都会变成render函数
扩展了$mount方法:处理template和el选项
尝试编译它们为render函数
定义$mount方法
文件路径:src/platforms/web/runtime/index.js
主要有两步:
1.执行挂载mountComponent(this, el, hydrating)
2.实现了patch方法
定义全局api
文件路径:src/core/index.js
定义全局api,set delete nextTick
initGlobalAPI(Vue)
Vue构造函数的定义
文件路径:src/core/instance/index.js
function Vue (options) {
this._init(options)
}
initMixin(Vue)//实现了_init()
stateMixin(Vue)//定义实例属性$data,$props,$set,$delete,$watch
eventsMixin(Vue)//$emit $on
lifecycleMixin(Vue)//_update $forceUpdate $destroy
renderMixin(Vue)//nextTick _render
initMixin内部实现
文件路径:src/core/instance/init.js
//初始化函数的实现
initLifecycle(vm)//初始化$parent,$root,$children,$refs
initEvents(vm)//处理父组件传递的监听器
initRender(vm)//$slots $scopedSlots,_c(),$createElement()
callHook(vm, 'beforeCreate')
initInjections(vm) // 获取注入数据
initState(vm)//初始化组件中props methods data computed watch
initProvide(vm) // 提供数据
callHook(vm, 'created')
//先inject再provide的原因是子组件尝试先拿值 拿到值再传给自己的子代 出于这个考虑
//如果有传进来el 初始化完会执行一次
vm.$mount(vm.$options.el)