import vue from vue_vue2.x源码分析（二）：引入Vue时都做了什么

2.1 对Vue的原型对象做一个初始化

import Vue from './instance/index' 都做了什么

入口文件是src/core/instance/index.js

//引入各种mixin文件，感觉就像拼图一样，Vue构造函数只提供了一个架子，靠这些mixin把Vue撑起来
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
//Vue构造函数
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')
  }
//调用init方法，new的时候其实就是走的这里
  this._init(options)
}
//给Vue的原型对象添加_init方法
initMixin(Vue)
//给Vue的原型对象添加$delete、$set、$watch方法
//get:$data、$props
//set:$data、$props
stateMixin(Vue)
//给Vue的原型对象添加$emit、$off、$on、$once方法
eventsMixin(Vue)
//给Vue的原型对象添加$destroy、$forceUpdate方法
lifecycleMixin(Vue)
//给Vue的原型对象添加$nextTick、_render、_update等方法
renderMixin(Vue)

export default Vue

这里使用了instanceof 方法，这个方法还比较复杂，在我另一个专栏前端小白成长日记中Object api文章里有讲到

有朋友问 “this instanceof Vue”这句代码的意思，这里详解一下

//这句话是用来判断使用Vue的时候是否用了new操作符
//new 操作符都做了什么操作？（经典面试题）
//1、创建一个空对象{}，假设为obj
//2、obj.__proto__ = Vue.prototype，将该实例对象的原型对象指向构造函数的prototype
//3、Vue.call(obj)，将实例对象对象作为构造函数中this的上下文，也就给obj赋予了Vue的属性和方法
//4、返回这个实例对象obj
//结合代码就很明显看得出来，如果没有用new操作符，this指向的是windows
//而使用了new操作符后，通过new的第三步，this就指向实例对象了。
//这个时候this就相当于实例对象本身
//这样就可以用instanceof操作符判断this的指向

这一节主要对应了初始化方法和实例的各种方法，如下图所示

2.2 对Vue构造函数做一个初始化

initGlobalAPI(Vue)做了什么

入口文件是src/core/global-api/index.js

import config from '../config'
import { initUse } from './use'
import { initMixin } from './mixin'
import { initExtend } from './extend'
import { initAssetRegisters } from './assets'
import { set, del } from '../observer/index'
import { ASSET_TYPES } from 'shared/constants'
import builtInComponents from '../components/index'

import {
  warn,
  extend,
  nextTick,
  mergeOptions,
  defineReactive
} from '../util/index'

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.'
      )
    }
  }
//给Vue构造函数添加get config()  set config()代理
  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.
// 这些工具方法不视作全局API的一部分，除非你已经意识到某些风险，否则不要去依赖他们
//给Vue构造函数添加util属性
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }
//给Vue构造函数添加set、delete、nextTick方法
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick
//给Vue构造函数添加options属性
//options内有components属性，负责组件部分
//directives属性，负责指令部分
//filters属性，负责过滤器部分
  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.
//再给Vue.options添加_base属性，指向Vue构造函数本身
  Vue.options._base = Vue
//这一步是把KeepAlive组件放进components里
  extend(Vue.options.components, builtInComponents)
//给Vue构造函数添加use方法
  initUse(Vue)
//给Vue构造函数添加mixin方法
  initMixin(Vue)
//给Vue构造函数添加extend方法、cid属性
  initExtend(Vue)
//给Vue构造函数添加component、directive、filter方法
  initAssetRegisters(Vue)
}

这里主要是对给Vue构造函数添加一些全局方法，如下图所示

还有一个比较重要的是options，这一部分在实例化的时候也会用到，主要对应下图