vue2源码浏览分析01
2017-03-20 18:49
381 查看
1.构造函数 Vue$3
http://www.cnblogs.com/jiebba/p/6544084.html http://www.cnblogs.com/jiebba 我的博客,来看吧!如果有错误,请留言修改下 哦!
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 我的博客,来看吧!如果有错误,请留言修改下 哦!
相关文章推荐
- mahout分类源码分析-01
- jQuery源码分析-01总体架构
- Java源码分析01_Integer
- 从vue.js的源码分析,input和textarea上的v-model指令到底做了什么
- 源码分析Vue.js的监听实现教程
- Vuex 2.0 源码分析
- jQuery源码分析-01总体架构分析
- spring源码分析之AOP-01
- Android大图加载,缩放,滑动浏览--SubsamplingScaleImageView 源码分析<一>大图加载
- Directfb【01】 基础模块和基本运行机制介绍 -- 源码结构分析图
- jQuery源码分析-01总体架构
- java源码分析01-Object源码分析
- Android 源码分析01_AsyncTask
- Vue.js 源码学习笔记 -- 分析前准备1 -- vue三大利器
- 一、Android源码分析01-Ubuntu14.04系统Android源码下载
- jQuery源码分析-01总体架构
- LXC1.0.7-- lxc-start 源码分析 01
- Mybatis3源码分析(01)-前期准备
- vue2源码浏览分析02
- jQuery源码分析-01总体架构