HTML5技术

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

字号+ 作者:H5之家 来源:H5之家 2017-03-21 09:00 我要评论( )

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);s

 

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

 

    我的博客,来看吧!

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

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 如何使用Vue2做服务端渲染 - 莫扬的天空

    如何使用Vue2做服务端渲染 - 莫扬的天空

    2017-03-18 15:00

  • 人工智能火爆,我的研究更劲爆——开启全民窃听风云——智能窃听程序源码放送! - 熬夜与烟

    人工智能火爆,我的研究更劲爆——开启全民窃听风云——智能窃听程序

    2017-03-14 16:01

  • H5安卓端浏览器如何去除select的边框? - yangzailu1990

    H5安卓端浏览器如何去除select的边框? - yangzailu1990

    2017-03-08 17:02

  • 性能秒杀log4net的NLogger日志组件(附测试代码与NLogger源码) - Sam Xiao

    性能秒杀log4net的NLogger日志组件(附测试代码与NLogger源码) - Sam

    2017-02-13 17:00

网友点评
<