vue核心源码解读三----mixin之一（初始化）

本节开始，我们具体来学习mixin部分的代码，今天学习的是core/instance/init.js内部的代码

首先我们来整体看一下init.js内部的代码，可以看到，除了上一节我们提到的initMixin方法外，还有还有其它三个函数

let uid = 0

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function {
   // ......
  }
}

export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
  // ......
}

export function resolveConstructorOptions (Ctor: Class<Component>) {
  // ......
}

function resolveModifiedOptions (Ctor: Class<Component>): ?Object {
  // ......
}

initMixin

我们从核心方法initMixin入手，我们上一节已经说过，initMixin为Vue原型挂载_init方法，用来在Vue初始化实例的时候，做一些初始化的事情 我们深入来看，首先，会为新生成的Vue实例分配一个uid，用来区分每个实例，然后在非生产环境下，通过window.performance这个dom api来进行一些性能监控的操作，这里mark(startTag)具体怎么做性能监控，这里不是重点，可以参考 developer.mozilla.org/zh-CN/docs/…

    Vue.prototype._init = function (options?: Object) {
        const vm: Component = this
        // a uid
        vm._uid = uid++
    
        let startTag, endTag
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
          startTag = `vue-perf-start:${vm._uid}`
          endTag = `vue-perf-end:${vm._uid}`
          mark(startTag)
        }
        // ......
  }

接下来,就是在检测到options里_isComponent为true时,执行initInternalComponent方法，初始化vue实例组件，这里作者也有说到，这么做是为了优化内部组件实例化的过程，因为动态的合并options是很缓慢的过程，并且内部组件的options也不需要做特殊处理。 如果检测到options里_isComponent为false时，则会对实例的options做动态的合并

 Vue.prototype._init = function (options?: Object) {
   // ......
    // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
  }

我们进入到initInternalComponent方法内部，可以看到这个过程是直接对实例的$options赋值，这个过程是很迅速的，可以看到这里面为当前实例$options上也挂载了一些其父节点赋与其的一些属性，比如propsData等

export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
  const opts = vm.$options = Object.create(vm.constructor.options)
  // doing this because it's faster than dynamic enumeration.
  const parentVnode = options._parentVnode
  opts.parent = options.parent
  opts._parentVnode = parentVnode

  const vnodeComponentOptions = parentVnode.componentOptions
  opts.propsData = vnodeComponentOptions.propsData
  opts._parentListeners = vnodeComponentOptions.listeners
  opts._renderChildren = vnodeComponentOptions.children
  opts._componentTag = vnodeComponentOptions.tag

  if (options.render) {
    opts.render = options.render
    opts.staticRenderFns = options.staticRenderFns
  }
}

我们再来看动态赋值的resolveConstructorOptions方法,这个函数总统来说就是在为vue实例构造，更新选项options，如果发现vue实例的构造函数的super选项（vm.constructor.super）为true的时候，依次递归的沿着vue组件树向上查询，如果上一层在这次调用时的options和之前缓存的不同时，首先调用resolveModifiedOptions找到有变化的选项，更新当前vue组件的options信息，这个过程是从有变化的组件地方开始，依次向上更新组件树的

export function resolveConstructorOptions (Ctor: Class<Component>) {
  let options = Ctor.options
  if (Ctor.super) {
    const superOptions = resolveConstructorOptions(Ctor.super)
    const cachedSuperOptions = Ctor.superOptions
    if (superOptions !== cachedSuperOptions) {
      // super option changed,
      // need to resolve new options.
      Ctor.superOptions = superOptions
      // check if there are any late-modified/attached options (#4976)
      const modifiedOptions = resolveModifiedOptions(Ctor)
      // update base extend options
      if (modifiedOptions) {
        extend(Ctor.extendOptions, modifiedOptions)
      }
      options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
      if (options.name) {
        options.components[options.name] = Ctor
      }
    }
  }
  return options
}

function resolveModifiedOptions (Ctor: Class<Component>): ?Object {
  let modified
  const latest = Ctor.options
  const sealed = Ctor.sealedOptions
  for (const key in latest) {
    if (latest[key] !== sealed[key]) {
      if (!modified) modified = {}
      modified[key] = latest[key]
    }
  }
  return modified
}

接下来，在非生成环境，为vm的_renderProxy属性做一层代理，在生产环境直接赋值为vue实例本身（vm）

Vue.prototype._init = function (options?: Object) {
    // ......
/* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // ......
}
initProxy = function initProxy (vm) {
    if (hasProxy) {
      // determine which proxy handler to use
      const options = vm.$options
      const handlers = options.render && options.render._withStripped
        ? getHandler
        : hasHandler
      vm._renderProxy = new Proxy(vm, handlers)
    } else {
      vm._renderProxy = vm
    }
}

最后一部分,首先为vue实例vm初始化生命周期，事件，渲染相关的属性方法，然后callHook触发beforeCreate生命周期钩子函数，紧接着对data/props做一些初始化处理，之后callHook触发created生命周期钩子函数,代表实例vm初始化完成。 接下来还是window.performance进行性能监控，然后如果选项中el存在，则执行$mount对实例组件进行dom挂载

注意到这里的initInjections和initProvide方法，主要是在created生命周期钩子之前对data和props做一定的处理，具体做了什么我们下一节详细分析，关于callhook以及$mount相关的内容，将会在后续生命周期相关部分解读

Vue.prototype._init = function (options?: Object) {
    // ......
    
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, '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)
    }
}

本节就到这里，主要分析了vue实例初始化方法_init的逻辑，总结来说，首先在每次触发init时，根据配置选项options的变化，对于实例的内部组件，直接更新options, 其余的，则从有变化的组件开始，沿着vue组件树向上递归更新组件所有祖先的options配置，之后进行初始化，主要是经历beforeCreate,created两个生命周期钩子函数，在这期间会对data和props做一定处理，之后会调用$mount,将组件渲染在dom树中