您的位置:首页 > 产品设计 > UI/UE

vue2源码浏览分析01

2017-03-20 18:49 381 查看
1.构造函数 Vue$3
function Vue$3 (options) {
if ("development" !== 'production' &&
!(this instanceof Vue$3)) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
  //执行初始化方法
this._init(options);
}
  
initMixin(Vue$3);
stateMixin(Vue$3);
eventsMixin(Vue$3);
lifecycleMixin(Vue$3);
renderMixin(Vue$3);
//设置原型
  
initGlobalAPI(Vue$3);
//绑定数据到构造函数上

Vue$3.version = '2.2.2';

Vue$3.config.mustUseProp = mustUseProp;        //必须使用的的props
Vue$3.config.isReservedTag = isReservedTag;        //是否是本地htmlht svg
Vue$3.config.getTagNamespace = getTagNamespace;      // 是否是svg  math
Vue$3.config.isUnknownElement = isUnknownElement;       //是否是未知标签   替换HTMLUnknownElement
//设置config配置

extend(Vue$3.options.directives, platformDirectives);     //绑定默认的两个指令到全局  v-model,v-show
extend(Vue$3.options.components, platformComponents);     //绑定默认的两个组件到全局  transition ,transitionGroup
//设置directives 和 components

Vue$3.prototype.__patch__ = inBrowser ? patch : noop;
//其他函数

Vue$3.prototype.$mount = function (el, hydrating) {      //挂载的方法
el = el && inBrowser ? query(el) : undefined;
return mountComponent(this, el, hydrating)
};
//绑定$mount方法

Vue$3.compile = compileToFunctions;                //将template   转换为  rander对象中 可以执行函数
//设置编译函数
  
initGlobalAPI(Vue$3);
//在 Vue 的构造函数添加方法和属性,提供全局变量和函数
function initGlobalAPI (Vue) {
var configDef = {};
configDef.get = function () { return config; };
{
configDef.set = function () {
warn(
'Do not replace the Vue.config object, set individual fields instead.'
);
};
}
  //设置 Vue 的config属性
Object.defineProperty(Vue, 'config', configDef);
Vue.util = {
warn: warn,      //错误提示函数,传入msg和vm
extend: extend,      //简单的扩展方法
mergeOptions: mergeOptions,     // 合并初始化的参数,并执行之心合并策略
defineReactive: defineReactive$$1    //
};

Vue.set = set;      //定义set方法,在(target,key,val)  在target上定义属性,如果该属性被观察则更新数据
Vue.delete = del;    //定义del方法  在(target,key)  删除key属性 ,如果该属性呗观察,则更新数据
Vue.nextTick = nextTick;    //绑定延时程序,数据改变后观察数据变化

Vue.options = Object.create(null);   //绑定 Vue 构造函数的  options
config._assetTypes.forEach(function (type) {
Vue.options[type + 's'] = Object.create(null);         //绑定 compontnents  , dereactors  , filters对象 到构造函数options上
});

Vue.options._base = Vue;     // 将构造函数的options._base指向 Vue

extend(Vue.options.components, builtInComponents);     //合并本地的 KeepAlive 到 构造函数的options.components中

  
defineReactive$$1
function defineReactive$$1 (obj, key, val, customSetter) {
//创建一个观察队列   用来存储当该数据改变时候要触发的对象,或者数据
var dep = new Dep();
var property = Object.getOwnPropertyDescriptor(obj, key);
if (property && property.configurable === false) {
return
}
  //获取 js 中的访问器 get/set
var getter = property && property.get;
var setter = property && property.set;
  
  //创建或返回一个 __ob__
var childOb = observe(val);
Object.defineProperty(obj, key, {   //给当前对象重新定义  get/set  方法,当对象被重新设置set方法时候  触发 所有依赖该数据的  数据更新 __ob__
enumerable: true,
configurable: true,
get: function reactiveGetter () {
var value = getter ? getter.call(obj) : val;
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
}
if (Array.isArray(value)) {
dependArray(value);
}
}
return value
},
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(obj) : val;
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if ("development" !== 'production' && customSetter) {
customSetter();
}
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
childOb = observe(newVal);    //给新的数据添加监听__ob__
dep.notify();         // 更新所有依赖该数据的数据
}
});
}
  
initUse(Vue);        //绑定  Vue.use(obj)  函数,安装插件  插件对象obj必须有  install 属性initMixin$1(Vue);     //绑定 Vue.mixin(obj)   将绑定的 直接合并到 options 上面initExtend(Vue);      //创建一个集成 Vue 的子类,用于创建公共的自定义  组件构造函数类initAssetRegisters(Vue); }     //绑定Vue.component , Vue,dereactor , Vue.filter 方法,用于注册 组件,指令,过滤器  并添加到 构造函数的options中
  
大部分是绑定到 Vue 的构造函数上面,为全局方法和属性。

http://www.cnblogs.com/jiebba/p/6544084.html http://www.cnblogs.com/jiebba 我的博客,来看吧!如果有错误,请留言修改下 哦!

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: