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 的构造函数上面,为全局方法和属性。
我的博客,来看吧!
如果有错误,请留言修改下 哦!