初始化流程
Vue的初始化流程，是从 new Vue() 开始的，从以下的图中可以看知道。在 new Vue()后，会执行init，再 $mount实现挂载，再到编译compile，生成render函数，接下来是响应式依赖收集，通过pach实现异步更新 。render function 会被转化为Vnode节点，Virtual DOM 是一棵以JavaScript对象（Vnode节点）为基础的树。是对真实DOM的描述。通过patch() 转化为真的 DOM。在数据有变化时，会通过setter -> Watcher -> update 来更新视图。整个Vue的运行机制大致就是这样。
接下来，我们来看在 new Vue() 过后发生了什么。Vue 中我们是通过 $mount 实现方法去挂载 vm 的。我们接下来主要分析带 complier 版本的 $mount 。
带 compiler 版本的 $mount 是在 src/platform/web/entry-runtime-with-compiler.js 中定义的。
const mount = Vue.prototype.$mount
// 扩展了$mount 方法
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
// 处理el 和 template 选项
const options = this.$options
// resolve template/el and convert to render function
// render 不存在时才考虑 el 和 template
if (!options.render) {
let template = options.template
if (template) {
if (typeof template === 'string') {
// template 是选择器
if (template.charAt(0) === '#') {
template = idToTemplate(template)
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && !template) {
warn(
`Template element not found or is empty: ${options.template}`,
this
)
}
}
} else if (template.nodeType) {
template = template.innerHTML
} else {
if (process.env.NODE_ENV !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {
// el 作为template
template = getOuterHTML(el)
}
// 编译过程
if (template) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile')
}
// 执行编译， 将template字符串 转化为 render 函数
const { render, staticRenderFns } = compileToFunctions(template, {
outputSourceRange: process.env.NODE_ENV !== 'production',
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile end')
measure(`vue ${this._name} compile`, 'compile', 'compile end')
}
}
}
return mount.call(this, el, hydrating)
}可以看到，这里是实现了对 $mount 进行了扩展，处理了template 或 el 选项。尝试编译他们为render函数。
我们在使用Vue 实例的时候，通常会这样写
const app = new Vue({
el: '#app',
})那其实可以写成
const app = new Vue({
render: h => h(App),
})
const app = new Vue({
template: '<div>测试</div>',
})
根据以上对以上代码的分析，Vue 不能挂载到 body、html 根节点上，然后会去如果没有 render 方法，才会去找 el 和 template，然后转换成render 方法。所以不管是 el 还是 template，最终都会转化成 render。 我们知道优先级的顺序 render > template > el 。 最后调用之前原型上的 $mount 方法挂载。
那么问题来了，现在的 Vue 构造函数从哪里来的呢？
import Vue from './runtime/index'
进入到platforms/web/runtime/index.js里面导出了Vue。
在这里，其实也不是Vue 构造函数的声明。这里主要干了两件事儿：
- 定义 $mount ： 挂载根组件到宿主元素上。
- 定义 _patch： 补丁函数，执行patching 算法进行更新
// 实现了patch 方法
Vue.prototype.__patch__ = inBrowser ? patch : noop
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
// 执行挂载
return mountComponent(this, el, hydrating)
}这里的 $mount 方法支持传入2个参数，第一个是 el ，表示挂载的元素，可以是字符串，也可以是 DOM 对象，如果是字符串在浏览器环境下调用 query 方法转换成 DOM, 第二次参数是和服务端渲染相关，在浏览器环境下不需要传第二个参数。
$mount 方法会调用 mountComponent 方法，后面再详讲。
接下来我们继续找 Vue 构造函数, 进入到核心代码 core/index 。
import Vue from 'core/index'在这里我们依然没有找到Vue 构造函数，但是这里有个核心代码。实现了全局 api
initGlobalAPI(Vue)进入到 initGlobalAPI 函数，具体实现了以下 api
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick
initUse(Vue) // 实现Vue.use函数
initMixin(Vue) // 实现Vue.mixin函数
initExtend(Vue) // 实现Vue.extend函数
initAssetRegisters(Vue) // 注册实现Vue.component/directive/filter我们再继续找 Vue 构造函数，进入到 core/instance/index.js 里面。我们终于找到了 Vue 构造函数。
function Vue (options) {
...
// 初始化
this._init(options)
}Vue 构造函数内部非常简单，只执行了 this._init(options)，实现初始化。 那么这里的 this.init() 又是在哪里定义的呢？
接着往下看
initMixin(Vue) // 实现了_init()函数
stateMixin(Vue) //状态相关api $data,$props,$set,$delete,$watch
eventsMixin(Vue) // 事件相关api $on,$once,$off,$emit
lifecycleMixin(Vue) // 生命周期api _update,$forceUpdate,$destroy
renderMixin(Vue) // 渲染api _render,$nextTickinitMixin(Vue) 实现了_init() 函数，当我们在 new Vue() 时，实际上是执行了 initMixin(Vue) 实现的方法，
core/instance/init.js 进入到 initMixin 方法。
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
...
vm._self = vm
initLifecycle(vm) //生命周期初始化 $parent, $root, $refs, $children
initEvents(vm) // 事件初始化 处理父组件传递的监听器
initRender(vm) // $slots,$scopedSlots,_c,$createElement
callHook(vm, 'beforeCreate') //生命周期钩子beforeCreate
initInjections(vm) // resolve injections before data/props 获取注入数据
initState(vm) // 初始化组件中的props，methods，data，computed，watch
initProvide(vm) // resolve provide after data/props 提供数据注入
callHook(vm, 'created') //生命周期钩子created
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false)
mark(endTag)
measure(`vue ${vm._name} init`, startTag, endTag)
}
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
}在 initMixin 方法中，在 Vue 的 原型上挂载了一个 _init。 初始化函数。在 _init() 中主要干了几件事儿：
- initLifecycle： 生命周期初始化 $parent, $root, $refs, $children
- initEvents： 事件初始化 处理父组件传递的监听器
- initRender： $slots，$scopedSlots，_c，$createElement
- callHook(vm, 'beforeCreate')： 生命周期钩子 beforeCreate
- initInjections： 获取注入数据
- initState： 初始化组件中的 props，methods，data，computed，watch
- initProvide： 提供数据注入
- callHook(vm, 'created')：生命周期钩子 created
根据以上的执行顺序，我们知道，在生命周期 beforeCreate 里面我们只可以拿到 $parent, $root, $refs, $children ，如果我们想要获取 props，methods，data，computed，watch，起码要等到created里面。
接着往下走
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}如果我们的选项中有 el，那么将会实现 $mount() 挂载。
以上就是整个的初始化流程。
相关文章
