14.vue中模板编译原理

70 阅读2分钟

什么是模板编译

我们在日常开发中会在template中写类似于html语法的内容.但是并不是html,因为这里的div并不是真的div,html里面也没有v-for,v-if的写法.这是为了方便我们开发,可以让我们书写类似于html的写法.然后vue.js将其转化编译为真实的html结构和js文件.模板编译就是把用户写的模板经过一些列处理,最终生成render函数的过程.

parse

在parse解析语法树,将template转换成AST tree,通过正则匹配,递归遍历,提取标签tag,节点类型type,属性attrs,子节点children等重要信息.

optimize

optimize优化语法树 优化语法树的目的是为了标记静态节点,静态节点就是那些对应的DOM子树永远不会发生变化的(例如一个div里面是纯文本内容),静态子树将来不会重新渲染,在patch的时候会直接跳过静态子树。 静态跟节点是包含子标签,并且子标签中没有动态内容(标签中只有文本内容不属于静态根节点)

generate

generate是将AST转化成render funtion字符串的过程,他递归了AST,得到结果是render的字符串。

render函数的就是返回一个_c(‘tagName’,data,children)的方法

1.第一个参数是标签名 2.第二个参数是他的一些数据,包括属性/指令/方法/表达式等等。 3.第三个参数是当前标签的子标签,同样的,每一个子标签的格式也是_c(‘tagName’,data,children)。

render->vnode

在mount阶段执行render函数得到vnode,然后进入patch阶段,最后创建真实dom,并挂载渲染