Vue 初始化

初始化之后调用 $mount 会挂载组件，如果是运行时编译，即不存在 render function 但是存在 template 的情况，需要进行 「 编译」 步骤。

src/core/instance/index.js 源码：

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')
  }
  this._init(options) // 当执行new Vue时会调用 _init方法
}

initMixin(Vue)       // initMixin为Vue prototype添加_init方法,Vue构造函数实例化对象时候就会调用该方法
stateMixin(Vue)      // 扩展 Vue prototype添加 $set，$delete，$watch方法
eventsMixin(Vue)     // 事件初始化，扩展 Vue prototype添加$on，$once ，$off，$emit方法
lifecycleMixin(Vue)  // 扩展 Vue prototype添加 _update，$forceUpdate，$destroy方法
renderMixin(Vue)     // 扩展 Vue prototype 添加 $nextTick ，_render 等方法

执行 new Vue() 之后。 Vue 内部会调用 _init 函数进行初始化，也就是上图的 init 过程。

Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。

Vue 初始化会将 options 合并到 Vue 实例的 $options 属性上。

其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数，用来实现 「 响应式」 以及 「 依赖收集」。

Vue 的初始化逻辑写的非常清楚，把不同的功能逻辑拆成一些单独的函数执行，让主线逻辑一目了然，这样的编程思想是非常值得借鉴和学习的。

在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM。

Vue.prototype._init

src/core/instance/init.js 源码：

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // 1.每个vue的实例上都有一个唯一的属性_uid
    vm._uid = uid++ 
    // 2.表示是Vue的实例
    vm._isVue = true

    // 3.选项合并策略
    if (options && options._isComponent) {
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    vm._self = vm
    // 4.进行初始化操作
    initLifecycle(vm) // 初始化组件间的父子关系 
    initEvents(vm) // 更新组件的事件
    initRender(vm) // 初始化_c方法
    callHook(vm, 'beforeCreate') // 触发 beforeCreate 生命周期钩子
    initInjections(vm)  // 初始化inject
    initState(vm) // 初始化状态 state 核心 响应式数据
    initProvide(vm) // 初始化provide
    callHook(vm, 'created') // 触发 created 生命周期钩子

    // 5.如果有el就开始进行挂载
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

initState

Vue 实例时，参数 options 中的 属性（props），方法（methods）， data 中的键值不能重名，因为属性（props），方法（methods）， data 的属性将代理到 vm 实例上，可以通过 vm 直接访问。

通过 Object.defineProperty 实现对 属性（props），方法（methods）， data 中属性的访问，设置代理。

Vue 内部会把 参数 options 中的 data 挂载到 vm._data，_ 一般代表是私有属性，一般不建议直接访问。通过 Object.defineProperty 实现对 属性（props），方法（methods）， data 中属性的访问，设置代理。

src/core/instance/state.js 源码：

// 判断用户传入了哪些属性 做不同的初始化操作
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)
  }
}

function initData (vm: Component) {
  let data = vm.$options.data
  // 获取数据 并挂载到 vm._data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  // 数据不是对象则抛出异常
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  // 属性 方法 data中的键值不能重名，因为属性 方法 data中的属性将代理到 vm 实例上，可以通过vm直接访问
  while (i--) {
    const key = keys[i]
    // 校验数据是否在method中已经声明过
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    // 校验数据是否在属性中已经声明过
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      // 将属性 方法 data中的属性代理到 vm 实例上，可以通过vm直接访问
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}

// 通过Object.defineProperty 实现对属性（props），方法（methods）， data 中属性的访问，设置代理。
export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

这里主要是检测数据是否被重复声明，并对数据进行观测。

参考

• Vue.js源码全方位深入解析
• 剖析 Vue.js 内部运行机制