vue2源码浏览分析01
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
个人博客 :很多好用的 npm 包 , 可以看看 https://gilea.cn/
http://www.cnblogs.com/jiebba 我的博客,来看吧!
如果有错误,请留言修改下 哦!
vue2源码浏览分析01的更多相关文章
- vue2源码浏览分析02
1.组件初始化方法 init Vue.prototype._init = function (options) { /* istanbul ignore if */ if ("develop ...
- Spring IOC 源码简单分析 01 - BeanFactory
### 准备 ## 目标 了解 Spring IOC 的基础流程 ## 相关资源 Offical Doc:http://docs.spring.io/spring/docs/4.3.9.RELEASE ...
- Vue2源码分析-逻辑梳理
很久之前就看完vue1,但是太懒就一直没写博客,这次打算抽下懒筋先把自己看过了记录下来,否则等全部看完,估计又没下文了 看源码总需要抱着一个目的,否则就很难坚持下去,我并没做过vue的项目,我几乎很少 ...
- JUC同步器框架AbstractQueuedSynchronizer源码图文分析
JUC同步器框架AbstractQueuedSynchronizer源码图文分析 前提 Doug Lea大神在编写JUC(java.util.concurrent)包的时候引入了java.util.c ...
- 自定义View系列教程03--onLayout源码详尽分析
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- 自定义View系列教程02--onMeasure源码详尽分析
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- MapReduce的ReduceTask任务的运行源码级分析
MapReduce的MapTask任务的运行源码级分析 这篇文章好不容易恢复了...谢天谢地...这篇文章讲了MapTask的执行流程.咱们这一节讲解ReduceTask的执行流程.ReduceTas ...
- Activity源码简要分析总结
Activity源码简要分析总结 摘自参考书籍,只列一下结论: 1. Activity的顶层View是DecorView,而我们在onCreate()方法中通过setContentView()设置的V ...
- MapReduce的MapTask任务的运行源码级分析
TaskTracker任务初始化及启动task源码级分析 这篇文章中分析了任务的启动,每个task都会使用一个进程占用一个JVM来执行,org.apache.hadoop.mapred.Child方法 ...
随机推荐
- 386 Lexicographical Numbers 字典序排数
给定一个整数 n, 返回从 1 到 n 的字典顺序.例如,给定 n =1 3,返回 [1,10,11,12,13,2,3,4,5,6,7,8,9] .请尽可能的优化算法的时间复杂度和空间复杂度. 输入 ...
- 300 Longest Increasing Subsequence 最长上升子序列
给出一个无序的整形数组,找到最长上升子序列的长度.例如,给出 [10, 9, 2, 5, 3, 7, 101, 18],最长的上升子序列是 [2, 3, 7, 101],因此它的长度是4.因为可能会有 ...
- log4j2异步日志解读(二)AsyncLogger
前文已经讲了log4j2的AsyncAppender的实现[log4j2异步日志解读(一)AsyncAppender],今天我们看看AsyncLogger的实现. 看了这个图,应该很清楚AsyncLo ...
- myeclipse中部署svn
一.下载SVN插件subclipse 下载地址:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 在打开的网 ...
- Meta标签 h5
一 PC端meta标签 1 页面关键词 <meta name="keywords" content="your tags"> 2 页面描述 < ...
- 廖雪峰 Git教程学习笔记 原文 http://www.liaoxuefeng.com/
一 .集中式与分布式 先说集中式版本控制系统,版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完活了,再把自己的活推 ...
- 对SNL语言的解释器实现尾递归优化
对于SNL语言解释器的内容可以参考我的前一篇文章<使用antlr4及java实现snl语言的解释器>.此文只讲一下"尾递归优化"是如何实现的--"尾递归优化& ...
- Python 开发初识
从今天开始记录自己的python开发之路,用博客记录自己的学习经历,以及学习小结,小的项目模块,努力充实,做最好的自己!!!
- GDB 学习
通常使用gdb在Linux下调试C/C++程序,编译的时候加上-g选项(gcc -g ......).下面总结的是我自己经常使用(当然也有一些用的比较少)的gdb命令. (1)开始及退出 开始:gdb ...
- 搭建FileZilla
FileZilla是C/S架构的,有服务端和客户端 客户端下载地址https://www.filezilla.cn/download/client 安装,一般就下一步下一步了. 服务端下载:https ...