Vue源码解析之AST语法树（三）

parse解析完之后，将生成的ast返回到baseCompile，接下来就是调用optimize方法对ast进行优化。

var createCompiler = createCompilerCreator(function baseCompile (template,options
) {//获取astvar ast = parse(template.trim(), options);if (options.optimize !== false) {optimize(ast, options);}var code = generate(ast, options);return {ast: ast,render: code.render,staticRenderFns: code.staticRenderFns}
});

optimize

function optimize (root, options) {if (!root) { return }//对静态标签进行缓存isStaticKey = genStaticKeysCached(options.staticKeys || '');isPlatformReservedTag = options.isReservedTag || no;//标记所有非静态节点markStatic$1(root);//标记所有静态root节点markStaticRoots(root, false);
}

optimize方法通过genStaticKeysCached缓存了所有静态标签，调用markStatic$1(root)标记所有非静态节点，调用markStaticRoots(root, false)标记静态root节点。

function markStatic$1 (node) {//判断是否是静态节点，isStatic代码在下面node.static = isStatic(node);if (node.type === 1) {//过滤掉slot标签和template标签//原因：组件不能变成slot节点//静态的slot节点内容不能热加载if (!isPlatformReservedTag(node.tag) &&node.tag !== 'slot' &&node.attrsMap['inline-template'] == null) {return}//循环递归标记节点for (var i = 0, l = node.children.length; i < l; i++) {var child = node.children[i];markStatic$1(child);if (!child.static) {node.static = false;}}if (node.ifConditions) {/**/}}
}

function isStatic (node) {if (node.type === 2) { // 判断是不是类似{{message}}这样的表达式return false}if (node.type === 3) { // 判断是不是纯文本return true}return !!(node.pre || (!node.hasBindings && // 是否动态绑定!node.if && !node.for && //是否v-if or v-for or v-else!isBuiltInTag(node.tag) && // not a built-inisPlatformReservedTag(node.tag) && // not a component!isDirectChildOfTemplateFor(node) &&Object.keys(node).every(isStaticKey) //遍历判断属性是否静态))
}

markStaticRoots

function markStaticRoots (node, isInFor) {if (node.type === 1) {if (node.static || node.once) {node.staticInFor = isInFor;}// 作为静态节点 必须有子节点并且不为纯文本 否则更新消耗较大if (node.static && node.children.length && !(node.children.length === 1 &&node.children[0].type === 3)) {node.staticRoot = true;return} else {node.staticRoot = false;}//进行递归标记if (node.children) {for (var i = 0, l = node.children.length; i < l; i++) {markStaticRoots(node.children[i], isInFor || !!node.for);}}if (node.ifConditions) {/**/}}
}

经过optimize函数，ast对象增加加了两个属性，如图:

接下来调用generate方法，将ast对象转换成Vue自定义的字符串形式。

generate

function generate (ast,options
) {//根据options创建CodegenState对象var state = new CodegenState(options);//调用genElement将ast对象转换为字符串var code = ast ? genElement(ast, state) : '_c("div")';return {render: ("with(this){return " + code + "}"),staticRenderFns: state.staticRenderFns}
}

genElement

function genElement (el, state) {if (el.staticRoot && !el.staticProcessed) {return genStatic(el, state)} else if (el.once && !el.onceProcessed) {return genOnce(el, state)} else if (el.for && !el.forProcessed) {return genFor(el, state)} else if (el.if && !el.ifProcessed) {return genIf(el, state)} else if (el.tag === 'template' && !el.slotTarget) {return genChildren(el, state) || 'void 0'} else if (el.tag === 'slot') {return genSlot(el, state)} else {// component or elementvar code;if (el.component) {code = genComponent(el.component, el, state);} else {//本例子进入这里，调用genData$2var data = el.plain ? undefined : genData$2(el, state);var children = el.inlineTemplate ? null : genChildren(el, state, true);code = "_c('" + (el.tag) + "'" + (data ? ("," + data) : '') + (children ? ("," + children) : '') + ")";}// module transformsfor (var i = 0; i < state.transforms.length; i++) {code = state.transforms[i](el, code);}return code}
}

genData$2

function genData$2 (el, state) {var data = '{';// 首先对directives进行处理// directives可能会对el上的其他属性有影响，所以先处理var dirs = genDirectives(el, state);if (dirs) { data += dirs + ','; }//根据本文的例子，没有执行的判断，代码都省略了/*处理key,ref,refInFor,pre,component*/// module data generation functionsfor (var i = 0; i < state.dataGenFns.length; i++) {data += state.dataGenFns[i](el);//调用genData对class进行处理}if (el.attrs) {//进入该判断，调用genProps，对el的属性进行处理data += "attrs:{" + (genProps(el.attrs)) + "},";}/*处理props,events,nativeEvents,slotTarget,scopedSlots,model,inlineTemplate*/data = data.replace(/,$/, '') + '}';// v-bind data wrapif (el.wrapData) {data = el.wrapData(data);}// v-on data wrapif (el.wrapListeners) {data = el.wrapListeners(data);}return data
}

genData$2跳过了大多数的判断，直接进入attrs，调用genProps函数

function genProps (props) {var res = '';// 将属性名，属性值拼接成 "属性名":"属性值"形式的字符串//本文例子"id":"test"for (var i = 0; i < props.length; i++) {var prop = props[i];/* istanbul ignore if */{res += "\"" + (prop.name) + "\":" + (transformSpecialNewlines(prop.value)) + ",";}}return res.slice(0, -1)
}

genData$2最终返回的data:

接下来开始对子节点进行处理

genChildren

function genChildren (el,state,checkSkip,altGenElement,altGenNode
) {var children = el.children;if (children.length) {var el$1 = children[0];//对v-for进行简单优化if (children.length === 1 &&el$1.for &&el$1.tag !== 'template' &&el$1.tag !== 'slot') {return (altGenElement || genElement)(el$1, state)}var normalizationType = checkSkip? getNormalizationType(children, state.maybeComponent): 0;var gen = altGenNode || genNode;return ("[" + (children.map(function (c) { return gen(c, state); }).join(',')) + "]" + (normalizationType ? ("," + normalizationType) : ''))}
}function genNode (node, state) {if (node.type === 1) {return genElement(node, state)} if (node.type === 3 && node.isComment) {return genComment(node)} else {return genText(node)}
}function genText (text) {return ("_v(" + (text.type === 2? text.expression // no need for () because already wrapped in _s(): transformSpecialNewlines(JSON.stringify(text.text))) + ")")
}function genComment (comment) {return ("_e(" + (JSON.stringify(comment.text)) + ")")
}

最终转换后的字符串的结果为：

正好对应Vue对v-model的解析过程：https://segmentfault.com/a/11...

code:

compileToFunction

接下来compileToFunction将生成的code字符串代码转化为函数

// turn code into functionsvar res = {};var fnGenErrors = [];//createFunction就返回了new Function(code)//这里的render就是上文的code字符串res.render = createFunction(compiled.render, fnGenErrors);res.staticRenderFns = compiled.staticRenderFns.map(function (code) {return createFunction(code, fnGenErrors)});

compileToFunction返回的对象信息：

$amount

var ref = compileToFunctions(template, {shouldDecodeNewlines: shouldDecodeNewlines,shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,delimiters: options.delimiters,comments: options.comments}, this);var render = ref.render;var staticRenderFns = ref.staticRenderFns;options.render = render;options.staticRenderFns = staticRenderFns;

$amount调用compileToFunctions后，将返回的对象包含的render函数和staticRenderFns属性，挂载到options参数上，然后再次调用mount。
整个函数调用过程：