VUE2.0 模板编译原理(一):解析器

vue的template里可以填充变量、表达式、指令,这些在HTML没有的功能就是靠模板编译实现的。模板编译的作用就是将模板转换为渲染函数,渲染函数执行的时候都会生成当前最新的vnode进行页面渲染。
模板--[输入]-->模板编译--[输出]-->渲染函数
这个过程分为三个步骤:
1、解析器:模板解析成AST(抽象语法树);
2、优化器:遍历AST标记静态节点,这样在虚拟DOM更新节点时避免重新渲染静态节点;
3、代码生成器:使用AST生成render函数。

一、解析器

AST与vnode类似,都是通过js对象来表示节点,比如parent记录父节点,type表示节点类型,children记录子节点这样,所以AST就是一个用js对象描述的节点树。

解析器又分成过滤器解析器、文本解析器(解析类似Hello { { name }}这种带变量的文本)和HTML解析器(核心,解析模板),这些解析器通过主线被组装在一起。

1、解析器内部运行原理:

主要的就是HTML解析器,在解析的过程中触发各种钩子函数:

  • 开始标签钩子函数start(tag:标签名, attrs:

你可能感兴趣的:(前端开发,vue.js,html)