一、入口文件
src/platform/web/entry-runtime-with-compiler.js
二、Vue初始化过程
1、首先取出Vue的$mount,对$mount进行重写,给$mount增加新的功能(重写mount方法)：将模板转换成render函数
/ src/platform/web/entry-runtime-with-compiler.js
// 保留 Vue实例的 $mount 方法
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
// 非ssr情况下的为false, ssr时候为true
hydrating?: boolean
): Component {
// 获取el对象
el = el && query(el)
...
}2、判断是否有render选项,如果没有render选项,则会把模版template取出,把模版编译成render函数,如果template也没有，会把el中的内容作为模板，通过compileToFunctions()方法将模板编译为render函数，编译好以后，将render存入到options.render中，接着调用mount方法,渲染DOM。（也就是说如果既存在template又存在render函数的时候会只执行render函数）
3、模板编译：给Vue增加了一个静态的compile方法,作用是把HTML字符串编译成render函数
if (!options.render) {
let template = options.template
if (template) {
...
}
}
Vue.compile = compileToFunctions
export default Vue4、这个文件主要是通过extend给Vue全局注册了指令和组件,组件是Transition和TransitionGroup,指令是v-model和v-show,接着在Vue的原型上注册了 _patch_ 函数, _patch_ 函数作用是将虚拟DOM转换成真实DOM,在给patch函数赋值的时候会判断是否是浏览器环境
5 、Vue的构造函数
// src/platforms/web/runtime/index.js
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)
// 判断是否是浏览器环境
Vue.prototype.__patch__ = inBrowser ? patch : noop三、初始化静态成员
src/core/index.js：
initGlobalAPI(Vue) // 给Vue的构造函数增加静态方法initGlobalAPI(Vue) 定义在src/core/global-api/index.js
/**初始化Vue.config对象
设置keep-alive 组件
注册Vue.use()用来注册插件
注册Vue.mixin()实现混入
注册Vue.extend()基于传入的options返回一个组件的构造函数
注册Vue.directive(), Vue.component(), Vue.filter**/
export function initGlobalAPI (Vue: GlobalAPI) {
const configDef = {}
configDef.get = () => config
if (process.env.NODE_ENV !== 'production') {
configDef.set = () => {
warn(
'Do not replace the Vue.config object, set individual fields instead.'
)
}
}
// 初始化 Vue.config对象
Object.defineProperty(Vue, 'config', configDef)
// exposed util methods.
// NOTE: these are not considered part of the public API - avoid relying on
// them unless you are aware of the risk.
// 这些工具方法不视作全局Api的一部分,除非你已经意识到某些风险,否则不要去依赖他们
Vue.util = {
warn,
extend,
mergeOptions,
defineReactive
}
// 静态方法 set/delete/nextTick
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick
// ...
Vue.options._base = Vue
// 设置keep-alive 组件
extend(Vue.options.components, builtInComponents)
// 注册Vue.use()用来注册插件
initUse(Vue)
// 注册Vue.mixin()实现混入
initMixin(Vue)
// 注册Vue.extend()基于传入的options返回一个组件的构造函数
initExtend(Vue)
// 注册Vue.directive(), Vue.component(), Vue.filter
initAssetRegisters(Vue)
}四、初始化实例成员
/**定义在src/core/instance/index.js
定义了构造函数，调用了this._init(options)方法
给Vue中混入了常用的实例成员**/
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
// 调用 _init()方法
this._init(options)
}
// 注册vm的_init()方法, 初始化vm
initMixin(Vue)
// 注册vm 的$data/$props/$set/$delete/$watch
stateMixin(Vue)
// 初始化事件相关方法
//$on/$once/$off/$emit
eventsMixin(Vue)
// 初始化生命周期相关的混入方法
// _update/$forceUpdate/$destroy
lifecycleMixin(Vue)
// 混入 render
// $nextTick/_render
renderMixin(Vue)
export default Vue初始化实例成员 init()
当静态成员和实例成员都初始化完成之后,接着调用Vue的构造函数,在构造函数中调用_init()方法_init是在initMixin中初始化的,主要对Vue实例初始化
// vm的生命周期相关变量初始化
initLifecycle(vm)
// vm的事件监听初始化,父组件绑定在当前组件上的事件
initEvents(vm)
// vm的编译render初始化
// $slots/$scopedSlots/_c/$createElement/$attrs/$listeners
initRender(vm)
// beforeCreate 生命钩子的回调
callHook(vm, 'beforeCreate')
// 把inject的成员注入到vm上
initInjections(vm) // resolve injections before data/props
// 初始化vm的 _props/methods/_data/computed/watch
initState(vm)
// 初始化provide
initProvide(vm) // resolve provide after data/props
// created 生命钩子回调
callHook(vm, 'created')初始化实例成员 initState()
// 初始化vm的 _props/methods/_data/computed/watch
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}在instance/state.js中,首先获取了Vue实例中的$options,然后判断options中是否有props,methods,data以及computed和watch这些属性,如果有的话,通过initProps进行初始化
函数中,首先给Vue实例定义了一个_Props对象, 并且把它存储到了常量里面initProps(vm, opts.props)接收了两个参数,一个是Vue实例,一个是Props属性,我们跳转到initProps
const props = vm._props = {} 紧接着,开始遍历PropsOptions的所有属性,它其实就是initProps方法中的第二个参数,遍历每个属性,然后通过defineReactive注入到Props这个对象上,这个props其实就是vm._props所有的成员都会通过defineReacttive转化为get和set,最后在Props对象上存储,
注意:在开发模式中,如果我们直接给这个属性赋值的话,会发出一个警告,生产环境中直接通过defineReactive把props中的属性转化成get和set最后判断了props属性是否在Vue实例中存在,不存在通过Proxy这个函数把我们的属性注入到Vue的实例中在 Proxy 中,通过调用Object.defineProperty(target, key,sharePropertyDefinition)
总结:initMethods作用就是把选项的methods注入到vue实例,在注入之前,会先判断我们命名是否在Props中存在,并且判断了命名的规范,不建议_和$开头
initData(vm):当options中有data选项时,会调用initData(vm),当没有的时候此时会给vm初始化一个_data属性observe(vm._data = {}, true)然后调用observe函数,observe是响应式中的一个函数,在initData中获取了options的data选项,判断了data选项是否是function,如果是调用getData(data,vm)接着获取data中的所有属性,同时获取了props,methods中所有的属性
// src/core/instance/state.js
const keys = Object.keys(data)
const props = vm.$options.props
const methods = vm.$options.methods最后做一个响应式处理: observe(data, true)
在_init函数的最后,又调用了$mount来挂载整个页面
// src/core/instance/init.js
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}五、首次渲染过程总结
在首次渲染之前,首先进行Vue初始化,初始化实例成员和静态成员
当初始化结束之后,要调用Vue的构造函数new Vue(),在构造函数中调用了_init()方法,这个方法相当于我们整个Vue的入口
在_init方法中,最终调用了$mount,一共有两个$mount,第一个定义在entry-runtime-with-compiler.js文件中,也就是我们的入口文件$mount,这个$mount()的核心作用是帮我们把模板编译成render函数，但它首先会判断一下当前是否传入了render选项，如果没有传入的话，它会去获取我们的template选项，如果template选项也没有的话，他会把el中的内容作为我们的模板，然后把模板编译成render函数，它是通过compileToFunctions()函数，帮我们把模板编译成render函数的,当把render函数编译好之后，它会把render函数存在我们的options.render中。
接着会调用src/platforms/web/runtime/index.js文件中的$mount方法,在这个中首先会重新获取el，因为如果是运行时版本的话，是不会走entry-runtime-with-compiler.js这个入口中获取el，所以如果是运行时版本的话，我们会在runtime/index.js的$mount()中重新获取el。
接下来调用mountComponent(),这个方法在src/core/instance/lifecycle.js中定义的，在mountComponent()中，首先会判断render选项，如果没有render选项，但是我们传入了模板，并且当前是开发环境的话会发送一个警告，目的是如果我们当前使用运行时版本的Vue,而且我们没有传入render,但是传入了模版,告诉我们运行时版本不支持编译器。接下来会触发beforeMount这个生命周期中的钩子函数，也就是开始挂载之前。
然后定义了updateComponent()，在这个函数中，调用vm._render和vm._update，vm._render的作用是生成虚拟DOM，vm._update的作用是将虚拟DOM转换成真实DOM，并且挂载到页面上
创建Watcher对象，在创建Watcher时，传递了updateComponent这个函数，这个函数最终是在Watcher内部调用的。在Watcher内部会用了get方法，当Watcher创建完成之后,会触发生命周期中的mounted钩子函数,在get方法中，会调用updateComponent()
挂载结束，最终返回Vue实例。
以上就是Vue的首次渲染过程
