Vue运行时---第一步扩展实例方法

[terribleness]

Vue.js发布分为三个版本：
1、 完整版：同时包含编译器和运行时的版本。
2、 编译器：用来将模版字符串编译成为JavaScript渲染函数的代码。
3、 运行时：用来创建Vue实例、渲染并处理虚拟DOM等代码。基本上就是出去编译器的其他一切。
我们先阅读运行时版本，了解Vue的创建过程。之后再阅读编译器版本，看编译其如何将html模版编译成为javascript代码。其实我们在使用vue-cli开发时，每当我们使用npm run build打包时，vue-loader会自动将template标签内的html模版编译成javascript代码，用户访问网站的js文件内，只会执行运行时版本，因为已经编译完成了。
下载Vue.js 2.4.4版本，源码中，发布运行时版本的入口是entry-runtime.js，这个文件中直接导入runtime文件夹中index.js文件。

runtime/index.js是Vue针对Web平台添加一些特定方法，其中最重要的就是Vue.protorype.$mount方法了，我们看到runtime/index.js中第一句 import Vue from ‘core/index’，core文件夹就是Vue核心代码了（如下图）。

1、’core/index’中第一句import Vue from ‘./instance/index’，是扩展Vue的实例方法。
2、initGlobalApi（Vue）,是扩展了Vue的静态方法。
最后返回了，扩展了实例方法和静态方法的Vue函数。

扩展实例方法

进入’./instance/index’，代码很简单（如下图），

首先定义了真正的function Vue(options)，之后分别制定initMixin（Vue）,stateMixin（Vue）,eventsMixin（Vue），lifecycleMixin（Vue）,renderMixin（Vue）这5个方法，为Vue函数添加实例不同用途的实例方法。

InitMixin（Vue）

这个函数里面做了一件事，就是给Vue扩展了vm._init实例方法。这个方法，也是在上图Vue构造函数中调用的this._init（options）

stateMixin（Vue）

这个函数里面主要就给Vue扩展了vm.$data、vm.$props、vm.$set、vm.$delete、vm.$watch这五个方法，具体每个函数里面干了什么，我们先不看。

EventsMixin（Vue）

这个函数里面主要给Vue扩展了vm.$on、vm.$once、vm.$off、vm.$emit四个方法。

lifecycleMixin（Vue）

这个函数里面给Vue扩展了vm._update、wm.$forceUpdate、vm.$destroy三个方法。

RenderMixin（Vue）

这个函数里面给Vue扩展了vm.$nextTick、vm._render、vm._o、vm._n、vm._s、vm._l、vm._t、vm._q、vm._i、vm._m、vm._f、vm._k、vm._b、vm._v、vm._e、vm._u、vm._g这些方法。

总结：
Vue扩展实例方法流程为：
1、 定义function Vue()
2、 initMixin扩展vm._init
3、 stateMixin扩展vm.$data、vm.$props、vm.$set、vm.$delete、vm.$watch
4、 eventsMixin扩展vm.$on、vm.$once、vm.$off、vm.$emit
5、 lifecycleMixin扩展vm._update、wm.$forceUpdate、vm.$destroy
6、 renderMixin扩展vm.$nextTick、vm._render和一些工具方法