这一篇其实非常水,没什么实质性内容,只是把 Vue 源码内部的东西都抽空了,放出一个空的架子出来。
我看的 Vue 代码是基于 2.0.3 的,目前而言的最高版本,直接从 dist 里面抽取的生成完的完整的代码,之所以没用 src 目录下的代码,只是因为 es2015 不熟练,flow 之类的更是从来没接触过。
好吧,下面就直接放代码吧,要说的都在注释里了:
// 环境检测,commonjs、amd 之类的支持情况解析
// 在好几个库的开头都看到完全相同的这段话,难不成是打包软件自动生成的?
(function(global, factory) {
typeof exports === 'object' && typeof module !== 'undefined'
? module.exports = factory()
: typeof define === 'function' && define.amd
? define(factory)
: (global.Vue = factory());
}(this, (function() {
'use strict';
function stateMixin(Vue) {}
function lifecycleMixin(Vue) {}
function renderMixin(Vue) {}
function eventsMixin(Vue) {}
var uid = 0;
function initMixin(Vue) {
Vue.prototype._init = function(options) {
var vm = this;
vm._uid = uid++;
vm._isVue = true;
};
}
function Vue$3(options) {
// 原代码中如果不用 new 来初始化构造函数,给出一个警告信息
// 此处参照 underscore 源码,稍做了修改,不用 new 构造,帮你 new 一个
if(!(this instanceof Vue$3)) {
return new Vue$3(options);
}
this._init(options);
}
// 通过混合继承的方式给 Vue$3 添加各类属性、功能
// 其实我也不知道啥叫混合继承,js 中的继承的概念实在搞不懂
// 初始化
initMixin(Vue$3);
// 状态
stateMixin(Vue$3);
// 事件
eventsMixin(Vue$3);
// 生命周期
lifecycleMixin(Vue$3);
// 渲染
renderMixin(Vue$3);
return Vue$3;
})));