vue2源码浏览分析01 - 小结巴巴吧

      2020-09-16 22:49      HTML5

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和vmextend: 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 的构造函数上面,为全局方法和属性。

我的博客,来看吧!

如果有错误,请留言修改下 哦!