Vue源码探究-核心类的实现

// 定义Vue构造函数，形参options
function Vue (options) {
  // 安全性判断，如果不是生产环境且不是Vue的实例，在控制台输出警告
  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)
}

// 引入初始化混合函数
import { initMixin } from './init'
// 引入状态混合函数
import { stateMixin } from './state'
// 引入视图渲染混合函数
import { renderMixin } from './render'
// 引入事件混合函数
import { eventsMixin } from './events'
// 引入生命周期混合函数
import { lifecycleMixin } from './lifecycle'
// 引入warn控制台错误提示函数
import { warn } from '../util/index'
...

// 挂载初始化方法
initMixin(Vue)
// 挂载状态处理相关方法
stateMixin(Vue)
// 挂载事件响应相关方法
eventsMixin(Vue)
// 挂载生命周期相关方法
lifecycleMixin(Vue)
// 挂载视图渲染方法
renderMixin(Vue)

export default Vue

// 导出ininMixin函数，接收形参Vue，
// 使用Flow进行静态类型检查指定为Component类
export function initMixin (Vue: Class<Component>) {
  // 在Vue类的原型上挂载_init()方法
  // 接收类型为原始对象的options形参，此参数为非必选参数
  Vue.prototype._init = function (options?: Object) {
    // 将实例对象赋值给vm变量
    // 这里会再次进行Component类型检查确保vm接收到的是Vue类的实例
    const vm: Component = this
    // 给实例对象vm定义_uid属性，作为vue实例的唯一标识ID
    // uid是在函数外定义的变量，从0开始增量赋值
    // a uid
    vm._uid = uid++
    // 定义startTag、endTag变量
    let startTag, endTag
    // 注释的意思是代码覆盖率检测工具istanbul会忽略if分支
    // 因为下面代码是专为性能分析使用的，以后都不做分析
    /* 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是进行性能分析的工具函数，目前可忽略
      mark(startTag)
    }
    // 给vm设置一个_isVue属性作为标记，避免被观察
    // 猜想可能是之后观察者进行监视的时候会忽略掉有这个标记的对象
    // 具体原因待以后分析
    // a flag to avoid this being observed
    vm._isVue = true
    // 合并options对象
    // 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 {
      // 否则执行合并options函数，并赋值给vm的公共属性
      // 在这里的合并函数主要是解决与继承自父类的配置对象的合并
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    // 忽略代码覆盖，在非生产环境初始化代理
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    // 暴露实例对象
    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')

    // 性能检测代码
    /* 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)
    }

    // 执行DOM元素挂载函数
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}