接着第一节开始继续吧(GoGoGo)

  上一节把mergeOptions函数弄完了,最后返回一个options赋给了vm.$options。

  这一节继续跑代码:

    function initMixin(Vue) {
Vue.prototype._init = function(options) {
//..上一节
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
);
// 从这里开始跑
/* istanbul ignore else */
{
initProxy(vm);
}
// 疯狂保存自身引用
vm._self = vm;
// 初始化跑起来
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm);
initState(vm);
initProvide(vm);
callHook(vm, 'created');
/* istanbul ignore if */
if ("development" !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false);
mark(endTag);
measure(((vm._name) + " init"), startTag, endTag);
}
// 判断是否有el属性 进行挂载
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
};
}

  剩余的代码主要有3件事:initProxy()、各种初始化函数、挂载vue。

  

  在讲initProxy()之前,有必要先讲讲这个奇怪的注释:/* istanbul ignore else */。

  这个注释代码段出现的频率和"development" !== 'production'不相上下,一开始我是无视的,但是慢慢的觉得很奇怪,这个注释可能并不简单。

  首先百度了一下istanbul,是个国家,天气不错,各种旅游攻略。发现不对劲,果断在前面加个js关键字,发现了这其实是一个代码覆盖率工具,即是否所有代码都测试到了。

  这个工具我就不介绍了,总之这行注释的意思就是,下一个代码段中的else语句不计入代码覆盖率计算。

  

initProxy()

  开始跑initProxy()函数,只接受一个参数,即当前vue实例。

    // Line-1620
initProxy = function initProxy(vm) {
// 是否支持es6的代理
if (hasProxy) {
// 根据参数判断调用哪一个代理
var options = vm.$options;
var handlers = options.render && options.render._withStripped ?
getHandler :
hasHandler;
vm._renderProxy = new Proxy(vm, handlers);
}
// 不支持
else {
vm._renderProxy = vm;
}
};

  首先会判断是否支持Proxy,这是ES6新出的语法代理,详情可见阮一峰的书:http://es6.ruanyifeng.com/#docs/proxy。

  若支持,再进行传进来的vm进行参数判断,选择代理。

  当前vm只有三个参数(其实不止,先不管了):$options、_isVue、_uid,所以很明显,调用的是hasHandelr这个代理。

    // Line-1562
var initProxy; {
//..一些字符匹配集
if (hasProxy) {
var isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta');
config.keyCodes = new Proxy(config.keyCodes, {
set: function set(target, key, value) {
// ...定义事件别名
}
});
}
var hasHandler = {
has: function has(target, key) {
var has = key in target;
// 判断key是否跟内置全局变量冲突
var isAllowed = allowedGlobals(key) || key.charAt(0) === '_';
// 不存在或者非法
if (!has && !isAllowed) {
warnNonPresent(target, key);
}
return has || !isAllowed
}
};
var getHandler = {
//..不管
};
initProxy = function initProxy(vm) {
// 是否支持es6的Proxy代理
if (hasProxy) {
// 根据参数判断调用哪一个代理函数
var options = vm.$options;
var handlers = options.render && options.render._withStripped ?
getHandler :
hasHandler;
vm._renderProxy = new Proxy(vm, handlers);
}
// 不支持
else {
vm._renderProxy = vm;
}
};
}

  Proxy这个说实话我看不太懂,属于那种看看就好的语法,可能境界没达到吧,但不怎么影响我理解这段代码,有错欢迎指出来。

  initProxy(vm)这个函数主要就做了一个方法劫持,相当于ng里面的拦截器,在vm._renderProxy中,每一个键都会进行合法性检测,如果与内置全局对象冲突,就会调用warnNonPresent()报警。

  

  如果不支持,就算了。

初始化家族

  这一部分包含8个初始化,个个都是怪物,然而由于案例比较简单,大部门都会直接跳过。

  1、initLifecycle

    // Line-2259
function initLifecycle(vm) {
var options = vm.$options;
// 没有parent 跳
var parent = options.parent;
if (parent && !options.abstract) {
while (parent.$options.abstract && parent.$parent) {
parent = parent.$parent;
}
parent.$children.push(vm);
}
vm.$parent = parent;
vm.$root = parent ? parent.$root : vm;
vm.$children = [];
vm.$refs = {};
vm._watcher = null;
vm._inactive = null;
vm._directInactive = false;
vm._isMounted = false;
vm._isDestroyed = false;
vm._isBeingDestroyed = false;
}

  这个函数主要对vm.$options.parent属性进行处理,很遗憾,我没有。

  目前,vm的属性是5个,多了_self、_renderProxy,跑完这个函数,又多了一串,暂时不管。

  

  2、initEvents

    // Line-2074
function initEvents(vm) {
vm._events = Object.create(null);
vm._hasHookEvent = false;
// 又搞parent 没有
var listeners = vm.$options._parentListeners;
if (listeners) {
updateComponentListeners(vm, listeners);
}
}

  多了2个事件相关属性。

  3、initRender

    // Line-3824
function initRender(vm) {
vm._vnode = null; // the root of the child tree
vm._staticTrees = null;
var parentVnode = vm.$vnode = vm.$options._parentVnode; // the placeholder node in parent tree
var renderContext = parentVnode && parentVnode.context;
// 由于传了2个undefined 返回一个空对象
vm.$slots = resolveSlots(vm.$options._renderChildren, renderContext);
vm.$scopedSlots = emptyObject;
// 2个属性方法 之后再看
vm._c = function(a, b, c, d) {
return createElement(vm, a, b, c, d, false);
};
vm.$createElement = function(a, b, c, d) {
return createElement(vm, a, b, c, d, true);
};
}

  4、callHook

    // Line-2532
function callHook(vm, hook) {
// hook => beforeCreate
// 没有这个钩子函数
var handlers = vm.$options[hook];
if (handlers) {
for (var i = 0, j = handlers.length; i < j; i++) {
try {
handlers[i].call(vm);
} catch (e) {
handleError(e, vm, (hook + " hook"));
}
}
}
// 这个也没有
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook);
}
}

  钩子函数都没有,这个初始化跳过。

  5、initInjections

    // Line-3218
function initInjections(vm) {
// 由于没有inject属性 跳过
var result = resolveInject(vm.$options.inject, vm);
if (result) {
Object.keys(result).forEach(function(key) {
/* istanbul ignore else */
{
defineReactive$$1(vm, key, result[key], function() {
warn(
"Avoid mutating an injected value directly since the changes will be " +
"overwritten whenever the provided component re-renders. " +
"injection being mutated: \"" + key + "\"",
vm
);
});
}
});
}
}

  

  6、initState

    // Line-2947
function initState(vm) {
vm._watchers = [];
var opts = vm.$options;
// 针对参数做初始化
if (opts.props) {
initProps(vm, opts.props);
}
if (opts.methods) {
initMethods(vm, opts.methods);
}
// 目前只有data参数
if (opts.data) {
initData(vm);
} else {
observe(vm._data = {}, true /* asRootData */ );
}
if (opts.computed) {
initComputed(vm, opts.computed);
}
if (opts.watch) {
initWatch(vm, opts.watch);
}
}

  这个地方开始对传进来的参数做初始化挂载,由于只传了el和data,而el参数在最后面才处理,所以目前只会执行initData函数。

  来看看initData函数运作,这可能是最关键的部分了。

    // Line-3011
function initData(vm) {
// 取出data参数 这里的data不是传进来的对data象 而是一个函数
var data = vm.$options.data;
// 判断类型 格式化data
data = vm._data = typeof data === 'function' ?
getData(data, vm) :
data || {};
// data属性必须返回对象
if (!isPlainObject(data)) {
data = {};
"development" !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
);
}
// 代理data属性
var keys = Object.keys(data);
var props = vm.$options.props;
var i = keys.length;
while (i--) {
if (props && hasOwn(props, keys[i])) {
"development" !== 'production' && warn(
"The data property \"" + (keys[i]) + "\" is already declared as a prop. " +
"Use prop default value instead.",
vm
);
}
// 禁止以$,_开头
else if (!isReserved(keys[i])) {
proxy(vm, "_data", keys[i]);
}
}
// 双绑入口
observe(data, true /* asRootData */ );
}

  整理一下,data属性初始化主要有格式化、代理、双绑三个部分。

  首先来看看格式化,在第一节中的mergeOptions函数最后面,options中的data属性变成了一个叫mergedInstanceDataFn的函数,因此三元表示式返回的是getData(data, vm)。

  getData函数比较简单, 所以把两个弄一起得了。

    // Line-3043
function getData(data, vm) {
try {
// 尝试执行data函数
return data.call(vm)
} catch (e) {
handleError(e, vm, "data()");
return {}
}
} // Line-1132
// 传进来的parentVal、childVal分别为undefined、{message:'Hello Vue!}
function mergedInstanceDataFn() {
// 这个是对象
var instanceData = typeof childVal === 'function' ?
childVal.call(vm) :
childVal;
// 这个是undefined
var defaultData = typeof parentVal === 'function' ?
parentVal.call(vm) :
undefined;
// 合并数据 由于第二个参数为undefined 直接返回原data对象
if (instanceData) {
return mergeData(instanceData, defaultData)
} else {
return defaultData
}
}

  在getData函数中,会尝试以vm为上下文执行data函数,根据参数执行mergedInstanceDataFn函数后,最后返回的仍然是传进来的data对象。

  

  再来看代理部分,首先会遍历data对象的键,判断是否不以$,_开头,然后进行代理操作。尝试了一下,如果使用$message,_message会报错,后面再看为什么。

  这部分的关键在于proxy这个函数,ES6自带的是Proxy,不是一个东西,是一个正常的函数。

    // Line-2930
var sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
}; // Line-2937
// target => vm | sourceKey => _data | key => 'message'
function proxy(target, sourceKey, key) {
sharedPropertyDefinition.get = function proxyGetter() {
return this[sourceKey][key]
};
sharedPropertyDefinition.set = function proxySetter(val) {
this[sourceKey][key] = val;
};
Object.defineProperty(target, key, sharedPropertyDefinition);
}

  简单来讲,这个方法就是给vm添加了一个_data属性,值是data。

  因为只传了一个message,所以 _data属性是这样的:

  

  第三部分属于比较核心的部分,即数据监测,双绑的一部分,下次写吧!

  用一张图片梳理一下第二节吧。

.2-Vue源码起步(2)的更多相关文章

  1. .1-Vue源码起步

    搞事!搞事! 截止2017.5.16,终于把vue的源码全部抄完,总共有9624行,花时大概一个月时间,中间迭代了一个版本(2.2-2.3),部分代码可能不一致,不过没关系! 上一个链接https:/ ...

  2. 【一套代码小程序&amp;Native&amp;Web阶段总结篇】可以这样阅读Vue源码

    前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...

  3. VUE 源码学习01 源码入口

    VUE[version:2.4.1] Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后 ...

  4. Vue源码后记-其余内置指令(3)

    其实吧,写这些后记我才真正了解到vue源码的精髓,之前的跑源码跟闹着玩一样. go! 之前将AST转换成了render函数,跳出来后,由于仍是字符串,所以调用了makeFunction将其转换成了真正 ...

  5. Vue源码后记-钩子函数

    vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...

  6. 大白话Vue源码系列(01):万事开头难

    阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的 ...

  7. 大白话Vue源码系列(02):编译器初探

    阅读目录 编译器代码藏在哪 Vue.prototype.$mount 构建 AST 的一般过程 Vue 构建的 AST 题接上文,上回书说到,Vue 的编译器模块相对独立且简单,那咱们就从这块入手,先 ...

  8. 大白话Vue源码系列(03):生成AST

    阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST ...

  9. 大白话Vue源码系列(03):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  10. 大白话Vue源码系列(04):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

随机推荐

  1. RTX二次开发集成

    1,rtx服务器端有很多端口,二次发的程序与这些打开的端口交互.打开端口的方法在rtx服务管理器中,默认http服务未启用.需要手动启用http端口如下: 如果打开rtx服务器没有启用http的801 ...

  2. SQL 简单查询语句 select

    select *from emp;//查询emp表内容

  3. VS中使用QT调用R脚本

    一开始想直接把R编译成库然后调用R,后来查了n多资料,发现VS中是无法办到的,官方也给出了一句话,大概意思就是没可能在VS中使用R提供的C++接口,大概是涉及到了底层的ABI的原因,具体也不太清楚. ...

  4. Day1 《机器学习》第一章学习笔记

    <机器学习>这本书算是很好的一本了解机器学习知识的一本入门书籍吧,是南京大学周志华老师所著的鸿篇大作,很早就听闻周老师大名了,算是国内机器学习领域少数的大牛了吧,刚好研究生做这个方向相关的 ...

  5. CentOS 6.4 源码安装MySQL 5.6

    1.安装前准备工作 1.1 必备的包 gcc/g++ :MySQL 5.6开始,需要使用g++进行编译.cmake :MySQL 5.5开始,使用cmake进行工程管理,cmake需要2.8以上版本. ...

  6. vscode插件和快捷键

    目前用的挺多的一些编辑器有webstorm,vscode,Atom,HBuilder等等 今天来说说vscode Visual Studio Code (简称 vscode) 是一款免费开源的现代化轻 ...

  7. 【LeetCode】238. Product of Array Except Self

    Product of Array Except Self Given an array of n integers where n > 1, nums, return an array outp ...

  8. Python+Selenium学习--分页处理

    场景 我们在测试一个web 应用时,经常出现翻页的情况,下面介绍翻页场景 代码 #!/usr/bin/env python # -*- codinfg:utf-8 -*- ''' @author: J ...

  9. SpagoBI 教程 Lesson 3: Highchart Dashboards

    SpagoBI Lesson 3: Highchart Dashboards Business Intelligence dashboards Every car comes with a dash ...

  10. C#匿名对象序列化

    //匿名对象序列化 }; Console.WriteLine(JsonConvert.SerializeObject(obj)); //匿名集合序列化 List<object> list ...