在2014年11月5日，Evan You推出了vue0.1版本，也正式开始了之后的vue之旅。最近刚好也看了下vue的源码，所以就有了这篇文章
一、Vue文件总览
vue
-dist
----vue.common.js
----vue.esm.js
----vue.js
----vue.min.js
----vue.runtime.common.js
----vue.runtime.esm.js
----vue.runtime.js
----vue.runtim.min.js
-src
----core
--------components
--------global-api
--------instance
--------observer
--------util
--------vdom
...
二、Vue全局API&插件挂载机制
1、文件加载机制
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.Vue = factory());
//global 为js执行环境，如浏览器执行，global则为window,故此Vue也提升为一个全局变量
}(this, (function () {
'use strict';
...
return Vue;
})))
以上就是文件的整体结构，exports 和 module 都是commonjs的规范所支持的变量，define是amd & cmd 所支持的变量， 前部分的代码主要是为了兼容以下三种方式
1、nodejs
2、amd & cmd
3、普通js文件
程序入口
function Vue (options) {
if ("development" !== 'production' &&
!(this instanceof Vue) //this 变量并非Vue时
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options); //真正开始执行初始化
}
_init方法作为Vue上的一个原型方法，挂载在Vue的prototype下，在加载vuejs之后，在new Vue({})之前将会执行以下几个方法
initMixin(Vue); //_init
stateMixin(Vue); //$set、$delete、$watch
eventsMixin(Vue); //$on、$once 、$off 、$emit
lifecycleMixin(Vue); //_update、$forceUpdate、$destroy
renderMixin(Vue); //$nextTick 、 _render
initGlobalAPI 顾名思义，定义了全局的一些常用的API
var configDef = {};
configDef.get = function () { return config; };
configDef.set = function () {
warn(
'Do not replace the Vue.config object, set individual fields instead.'
);
};
//configurable false
//enumerable false
//value undefined
//writable false
Object.defineProperty(Vue, 'config', configDef);
Vue.util = {
warn: warn,
extend: extend,
mergeOptions: mergeOptions,
defineReactive: defineReactive
};
Vue.set = set;
Vue.delete = del;
Vue.nextTick = nextTick;
Vue.options = Object.create(null);
Vue.options['components'] = Object.create(null);
Vue.options['directives'] = Object.create(null);
Vue.options['filters'] = Object.create(null);
Vue.options._base = Vue; // Weex's multi-instance scenarios.
extend(Vue.options.components,{
KeepAlive: KeepAlive
});
//KeepAlive定义如下
var KeepAlive = {
name: 'keep-alive',
abstract: true,
props: {
include: patternTypes,
exclude: patternTypes,
max: [String, Number]
},
created: function created () {
this.cache = Object.create(null);
this.keys = [];
},
destroyed: function destroyed () {
var this$1 = this;
for (var key in this$1.cache) {
pruneCacheEntry(this$1.cache, key, this$1.keys);
}
},
mounted: function mounted () {
var this$1 = this;
this.$watch('include', function (val) {
pruneCache(this$1, function (name) { return matches(val, name); });
});
this.$watch('exclude', function (val) {
pruneCache(this$1, function (name) { return !matches(val, name); });
});
},
render: function render () {
var slot = this.$slots.default;
var vnode = getFirstComponentChild(slot);
var componentOptions = vnode && vnode.componentOptions;
if (componentOptions) {
// check pattern
var name = getComponentName(componentOptions);
var ref = this;
var include = ref.include;
var exclude = ref.exclude;
if (
// not included
(include && (!name || !matches(include, name))) ||
// excluded
(exclude && name && matches(exclude, name))
) {
return vnode
}
var ref$1 = this;
var cache = ref$1.cache;
var keys = ref$1.keys;
var key = vnode.key == null
// same constructor may get registered as different local components
// so cid alone is not enough (#3269)
? componentOptions.Ctor.cid + (componentOptions.tag ? ("::" + (componentOptions.tag)) : '')
: vnode.key;
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance;
// make current key freshest
remove(keys, key);
keys.push(key);
} else {
cache[key] = vnode;
keys.push(key);
// prune oldest entry
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode);
}
}
vnode.data.keepAlive = true;
}
return vnode || (slot && slot[0])
}
}
再初始化以下方法
initUse(Vue); //Vue.use = function(plugin) { return this}
initMixin$1(Vue);
initExtend(Vue);
initAssetRegisters(Vue);
Vue.use 是initUse方法的内部实现，主要为了实现插件机制，在同一个运行的项目下，插件只会加载一次，原理如下所述：
- 加载的插件会放在_installedPlugins数组下，如果再次调用Vue.use 先会判断是否已经包含此插件，如已包含直接返回
- 未加载的情况下，先将传递的参数变为数组args，同时将Vue变量注入到数组的第一个元素
- 如果插件提供了install方法，直接调用执行install方法，并且转化的args数组参数传入其中
- 如果插件未提供install方法并且插件本身是个可执行的方法，则直接执行插件本身
- 如果两则都不是，Vue还没有处理该情况，希望下一个版本能够加上...
Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()，然而在例如 CommonJS 的模块环境中，你应该始终显式地调用 Vue.use()
下面代码解释了vue-router不需要显式调用Vue.use()的原因了
//vue-router.js 第2625行
if (inBrowser && window.Vue) {
window.Vue.use(VueRouter);
}
待续....