import vue from vue_Vue源码全面解析三（new Vue()之前那些不为人知的工作）

我们首先打开"/src/core/instance/index.js"文件，可以看到代码如下：

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'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)}initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin(Vue)export default Vue

可以看到代码主要分为四个部分：

1、导入模块

2、定义Vue函数

3、调用导入模块的函数

4、导出Vue函数

我们接下就重点看看定义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)}

可以看到非常简单粗暴的定义了一个function vue。

判断当前是否为生产环境(production)，并且this是否为Vue的实例。

判断是否通过new关键字来调用当前函数，如果不满足以上两个条件将有warn警告提示。

然后调用_init函数。

这就是vue函数所做的事情，非常的简单。

后面章节我们会一一分析以下函数，看看各个函数做了哪些不为人知的工作，我们现在简单说一下这些函数的作用。

initMixin(Vue)

给Vue函数的原型对象 'prototype' 添加 ‘_init’方法

stateMixin(Vue)

处理数据(“$data”、“$props”)

eventsMixin(Vue)

给Vue函数的原型对象 'prototype' 添加事件处理相关函数(“$on”、“$once”、“$off”、“$emit”)

lifecycleMixin(Vue)

给Vue函数的原型对象 'prototype' 添加渲染(“_update”、“$forceUpdate”)和销毁(“$destroy”)相关函数

renderMixin(Vue)

给Vue函数的原型对象 'prototype' 添加渲染相关函数(“$nextTick”、“_render”)