vue模板编译原理

Vue对模板编译的流程分为三个部分

• 解析器(parser)
  作用是将模板字符串转换为 element ASTs
• 优化器(optimizer)
  作用是找出静态节点和静态跟节点
• 代码生成器(code generator)
  作用是使用element ASTs生成 render函数代码(generate render function code from element ASTs)

原理

1. 解析器的原理是一小段一小段的取截取字符串，然后维护一个stack用来保存DOM深度，每截取到一段标签的开始就push进stack中，当所有字符串都截取完之后也就解析出一个完成的AST
2. 优化器的原理是采用递归的方式,将所有的节点打标记，表示是否是一个静态节点，然后再次递归一边把静态根节点也标记出来
3. 代码生成器的原理，也是通过递归去拼一个函数执行代码的字符串,递归的过程根据不同的节点类型调用不同的生成方法,如果发现是一个元素节点就拼一个_c(tagName,data,children)的函数调用字符串，然后data和children也是使用AST中的属性去拼字符串。如果children中还有children，则递归去拼
   最后拼出一个完整的render函数代码