.2-Vue源码起步(2)

时间:2023-03-08 18:57:44

接着第一节开始继续吧(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)

  

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

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

.2-Vue源码起步(2)