Vue源码分析——Vue的引入

文章首发于个人博客 小灰灰的空间。
新人刚开始写博客记录生活，请多指教

Vue 的引入

Vue 构造器

Vue 本质上是一个函数，在函数内部保证了只能使用 new 关键字类创建 Vue 实例

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)
}

定义 Vue 原型上的方法

// 定义 Vue 原型上的 _init 方法
initMixin(Vue)
// 定义状态相关方法
stateMixin(Vue)
// 定义事件相关方法
eventsMixin(Vue)
// 定原型上的义声明周期相关方法 （_update $forceUpdate $destroy）
lifecycleMixin(Vue)
// 定义原型上的渲染方法
renderMixin(Vue)

定义全局 API

在 core/index.js 文件中调用 initGlobalAPI 初始化了一些全局 API，例如 use、extend、mixin 等.

另外在 initGlobalAPI 方法中初始化了 Vue 默认的选项，在后面 Vue 实例初始化合并选项时会与 Vue 实例的默认选项进行合并

export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  Object.defineProperty(Vue, 'config', configDef)

  // exposed util methods.
  // NOTE: these are not considered part of the public API - avoid relying on
  // them unless you are aware of the risk.
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }

  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

  // 2.6 explicit observable API
  Vue.observable = <T>(obj: T): T => {
    observe(obj)
    return obj
  }

  // 初始化一些默认的构造器选项 
  
  Vue.options = Object.create(null)
  ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  // 创建子组件构造器时会使用到 _base 属性， 
  // 创建子组件构造器时是用 _base (Vue 构造器) 通过原型继承得到的
  Vue.options._base = Vue

  // 初始化内置组件
  extend(Vue.options.components, builtInComponents)

  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
}