这一节争取搞完！
回头来看看那个render代码，为了便于分析，做了更细致的注释；
(function() {
// 这里this指向vue对象 下面的所有方法默认调用Vue$3.prototype上的方法
with(this){
return _c/*方法调用 => has拦截器过滤*/
('div',{attrs:{"id":"app"}},
_l/*方法调用 => has拦截器过滤*/(
(items/*_data属性访问 => 自定义proxy过滤*/),
function(item){
return _c/*方法调用 => has拦截器过滤*/
('a',{attrs:{"href":"#"}},
[_v/*方法调用 => has拦截器过滤*/
(_s/*方法调用 => has拦截器过滤*/(item))])
}))
}
})
所有的has拦截器之前分析过了，跳过，但是这里又多了一个特殊的访问，即items，但是Vue$3上并没有这个属性，属性在Vue$3._data上，如图：
，那这是如何访问到的呢？
Vue在initState的时候自己又封装了一个proxy，所有对属性的访问会自动跳转到_data上，代码如下：
Vue.prototype._init = function(options) {
// code...
// 这里处理是ES6的Proxy
{
initProxy(vm);
}
// beforeCreate
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
// code...
};
function initState(vm) {
// if...
if (opts.data) {
initData(vm);
} else {
// 没有data参数
observe(vm._data = {}, true /* asRootData */ );
}
// if...
}
function initData(vm) {
// code...
while (i--) {
if (props && hasOwn(props, keys[i])) {
// warning
} else if (!isReserved(keys[i])) {
proxy(vm, "_data", keys[i]);
}
}
// observe data...
}
// target => vm
// sourceKey => _data 这个还有可能是props 不过暂时不管了
// key => data参数中所有的对象、数组
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);
}
可以看到，最后一个函数中，通过defineProperty方法，所有对vm属性的直接访问会被跳转到Vue$3[sourceKey]上，这里指就是_data属性。
而这个属性的读写，同样被特殊处理过，即数据劫持，跑源码的时候也讲过，直接贴核心代码：
function defineReactive$$1(obj, key, val, customSetter) {
// var...
Object.defineProperty(obj, key, {
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) {
// set...
}
});
}
简单来讲，所有对_data上的属性的读写都会被拦截并调用自定义的get、set方法，这里也不例外，数据会被添加到依赖接受监听，详细过程太细腻就不贴了，有兴趣可以自己去跑跑。
访问items后，数组中的元素会被watch，有变化会通知DOM进行更新，这里接下来会执行_l方法：
Vue.prototype._l = renderList;
// val => items
// render => function(item){...}
function renderList(val, render) {
var ret, i, l, keys, key;
// 数组 => 遍历进行值渲染
if (Array.isArray(val) || typeof val === 'string') {
ret = new Array(val.length);
for (i = 0, l = val.length; i < l; i++) {
ret[i] = render(val[i], i);
}
}
// 纯数字 => 处理类似于item in 5这种无数据源的模板渲染
else if (typeof val === 'number') {
ret = new Array(val);
for (i = 0; i < val; i++) {
ret[i] = render(i + 1, i);
}
}
// 对象 => 取对应的值进行渲染
else if (isObject(val)) {
keys = Object.keys(val);
ret = new Array(keys.length);
for (i = 0, l = keys.length; i < l; i++) {
key = keys[i];
ret[i] = render(val[key], key, i);
}
}
return ret
}
代码还是清晰的，三种情况：数组、纯数字、对象。
用过应该都明白是如何处理三种情况的，这里将对应的值取出来调用render方法，这个方法来源于第二个参数：
// item => 1,2,3,4,5
(function(item) {
return _c('a', {attrs: {"href": "#"}}, [_v(_s(item))])
})
方法很抽象，慢慢解析。
因为与tag相关，所以再次调用了_c函数，但是执行顺序还是从内到外，因此会对_v、_s做过滤并首先调用_s函数：
Vue.prototype._s = toString;
// val => item => 1,2,3,4,5
function toString(val) {
return val == null ?
'' :
typeof val === 'object' ?
JSON.stringify(val, null, 2) :
String(val)
}
这个方法一句话概括就是字符串化传进来的参数。
这里先传了一个数字1，返回字符串1并将其作为参数传入_v函数：
Vue.prototype._v = createTextVNode;
// val => 1
function createTextVNode(val) {
return new VNode(undefined, undefined, undefined, String(val))
}
这个函数从命名也能看出来，创建一个文本的vnode，值为传进来的参数。
可以看一眼这个虚拟DOM的结构：
，因为是文本节点，所以只有text是有值的。
形参都处理完毕，下一步进入_c函数，看下代码：
vm._c = function(a, b, c, d) {
return createElement(vm, a, b, c, d, false);
};
var SIMPLE_NORMALIZE = 1;
var ALWAYS_NORMALIZE = 2;
function createElement(context, tag, data, children, normalizationType, alwaysNormalize) {
// 参数修正
if (Array.isArray(data) || isPrimitive(data)) {
normalizationType = children;
children = data;
data = undefined;
}
// 模式设定
if (isTrue(alwaysNormalize)) {
normalizationType = ALWAYS_NORMALIZE;
}
return _createElement(context, tag, data, children, normalizationType)
}
// context => vm
// tag => 'a'
// data => {attr:{'href':'#'}}
// children => [vnode...]
// normalizationType => undefined
// alwaysNormalize => false
function _createElement(context, tag, data, children, normalizationType) {
if (isDef(data) && isDef((data).__ob__)) {
// warning...
return createEmptyVNode()
}
if (!tag) {
// in case of component :is set to falsy value
return createEmptyVNode()
}
// support single function children as default scoped slot
if (Array.isArray(children) && typeof children[0] === 'function') {
data = data || {};
data.scopedSlots = {
default: children[0]
};
children.length = 0;
}
// 未设置该参数
if (normalizationType === ALWAYS_NORMALIZE) {
children = normalizeChildren(children);
} else if (normalizationType === SIMPLE_NORMALIZE) {
children = simpleNormalizeChildren(children);
}
var vnode, ns;
if (typeof tag === 'string') {
var Ctor;
// 判断标签是否为math、SVG
// math是HTML5新出的标签 用来写数学公式
// SVG就不用解释了吧……
ns = config.getTagNamespace(tag);
// 判断标签是否为内置标签
if (config.isReservedTag(tag)) {
// 生成vnode
// config.parsePlatformTagName返回传入的值 是一个傻逼函数
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
);
} else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// component
vnode = createComponent(Ctor, data, context, children, tag);
} else {
// 未知标签
vnode = new VNode(
tag, data, children,
undefined, undefined, context
);
}
} else {
// direct component options / constructor
vnode = createComponent(tag, data, context, children);
}
if (isDef(vnode)) {
// 特殊标签处理
if (ns) {
applyNS(vnode, ns);
}
return vnode
} else {
return createEmptyVNode()
}
}
其实吧，这函数看起来那么长，其实也只能根据传进去的参数生成一个vnode，具体过程看注释，看看结果：
可以看出，属性还是那样子，没怎么变，children是之前生成的那个文本虚拟DOM。
在renderList函数中，循环调用render，分别传进去items数组的1、2、3、4、5，所以依次生成了5个vnode，作为数组ret的元素，最后返回一个数组：
接下来进入外部的_c函数，这一次是对div标签进行转化，过程与上面类似，最后生成一个完整的虚拟DOM，如下所示：
这里也就将整个挂载的DOM转化成了虚拟DOM，其实吧，一点也不难，是吧！