vue源码学习-new Vue时发生了什么

前言

Vue框架包含了各类各样的特性，为了更好的理解框架自己，让咱们来看看在vue初始化时所作的一些操做

// 合并选项，参数处理
if (options && options._isComponent) {
  // 优化内部组件的实例化，而且内部组件的动态合并较慢，且没有须要特殊处理的部分。
  initInternalComponent(vm, options)
} else {
  // 合并选项
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  )
}
复制代码

// 暴露出真正的this指向
vm._self = vm
// 初始化生命周期
initLifecycle(vm)
// 初始化事件监听
initEvents(vm)
// 渲染页面
initRender(vm)
// 进入beforeCreate生命周期
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
// 初始化状态
initState(vm)
initProvide(vm) // resolve provide after data/props
// 进入created生命周期
callHook(vm, 'created')

if (vm.$options.el) {
  vm.$mount(vm.$options.el)
}
复制代码

如下按顺序介绍调用方法的具体做用：

initLifecycle

主要是进行一些变量的初始化

initEvents

初始化事件监听

initRender

主要是初始化组件的scopedSlots属性，以及listeners属性

callHook(vm, 'beforeCreate')

不用说也知道，这是调用beforeCreate生命周期方法

initInjections

vue2.2.0新增的特性，初始化做为HOC高阶组件使用的api，包含一个provide和inject属性，父级组件经过provide注入一个object，子组件无论多少层级，均可以经过inject来获取父组件注入的值。 initInjectctions就是初始化inject属性的

initState

初始化data、props、methods、computed、watch等属性

initProvide

从方法名能够看出，是用来初始化provide这个HOC组件属性的

callHook(vm, 'created')

调用created生命周期方法

vm.options.el)

当new Vue的时候传入了el属性（即vue模板挂载的dom节点）时，调用$mount方法,初始化dom节点。

博客地址 gitbook小册