vue模板编译原理

Vue对模板编译的流程分为三个部分
  • 解析器(parser)
    作用是将模板字符串转换为 element ASTs
  • 优化器(optimizer)
    作用是找出静态节点静态跟节点
  • 代码生成器(code generator)
    作用是使用element ASTs生成 render函数代码(generate render function code from element ASTs)
原理
  1. 解析器的原理是一小段一小段的取截取字符串,然后维护一个stack用来保存DOM深度,每截取到一段标签的开始就pushstack中,当所有字符串都截取完之后也就解析出一个完成的AST
  2. 优化器的原理是采用递归的方式,将所有的节点打标记,表示是否是一个静态节点,然后再次递归一边把静态根节点也标记出来
  3. 代码生成器的原理,也是通过递归去拼一个函数执行代码的字符串,递归的过程根据不同的节点类型调用不同的生成方法,如果发现是一个元素节点就拼一个_c(tagName,data,children)的函数调用字符串,然后data和children也是使用AST中的属性去拼字符串。如果children中还有children,则递归去拼
    最后拼出一个完整的render函数代码

你可能感兴趣的:(vue模板编译原理)