vue模版编译

已知template内容

<div id="app">
    <h1 key1="key1">
        h1-h1
        <h3 key3="key3">{{a}}</h3>
    </h1>
    <h2 key2="key2">{{b}}</h2>
</div>

打印内容

var ast = parse(template.trim(), options);   //console.log(ast)
var code = generate(ast, options);

ast内容如下

{type: 1, tag: "div", attrsList: Array(1), attrsMap: {…}, rawAttrsMap: {…}, …}
attrs: [{name: "id", value: "app", dynamic: undefined, start: 5, end: 13}]
attrsList: [{name: "id", value: "app", start: 5, end: 13}]
attrsMap: {id: "app"}
children: (4) [{…}, {…}, {…}, {…}] 展开在下面
end: 132
parent: undefined
plain: false
rawAttrsMap: {id: {name: "id", value: "app", start: 5, end: 13}}
start: 0
static: false
staticRoot: false
tag: "div"
type: 1

上面的children属性展开

0: {type: 1, tag: "h1", attrsList: Array(1), attrsMap: {…}, rawAttrsMap: {…}, …}
1: {type: 1, tag: "h3", attrsList: Array(1), attrsMap: {…}, rawAttrsMap: {…}, …}
2: {type: 3, text: " ", start: 89, end: 99, static: true}
3: {type: 1, tag: "h2", attrsList: Array(1), attrsMap: {…}, rawAttrsMap: {…}, …}

generate函数

function generate (
  ast,
  options
) {
  var state = new CodegenState(options);
  var code = ast ? (ast.tag === 'script' ? 'null' : genElement(ast, state)) : '_c("div")';
  return {
    render: ("with(this){return " + code + "}"),
    staticRenderFns: state.staticRenderFns
  }
}

源代码 对照 code代码

<div id="app">
    <h1 key1="key1">
        h1-h1
        <h3 key3="key3">{{a}}</h3>
    </h1>
    <h2 key2="key2">{{b}}</h2>
</div>

_c('div',
    { attrs:{"id":"app"} },
    [ _c('h1',{attrs:{"key1":"key1"}},[_v("\n  h1-h1\n  ")]),_c('h3',{attrs:{"key3":"key3"}},[_v(_s(a))]),_v(" "),
        _c('h2',{attrs:{"key2":"key2"}},[_v(_s(b))])
    ]
)