结合 数据结构-栈 理解vue2模板编译原理

来碗螺狮粉
103 阅读2分钟

栈结构定义

栈又名堆栈，它是一种运算受限的线性表，限定仅在表尾进行插入和删除操作的线性表。表尾这端被称为栈顶，表头这端被称为栈底。向一个栈的栈尾插入一个新元素又称进栈、入栈或者压栈,它是把新元素放到栈顶，使之成为新的元素；从栈顶删除一个元素称为出栈、退栈，使其相邻的元素称为新的栈顶元素。

特点:后进先出

栈结构的封装(比较简单,直接上代码)

image.png

leetcode上几道练手的题目

这道的实现逻辑跟VUE2模板编译原理中存储/删除标签首尾标识符的逻辑很像

image.png

image.png

Vue2模板编译原理

对构造函数Vue中的传参根据优先级进行判断,首先判断传参中是否包含render函数,没有的话就构造一个compileToFunction函数,判断传参中是否包含template,有就将template作为传参塞给complieToFunction函数，如果没有template并且传参中包含el字段，则将el对应的标签设置为template并塞给complieToFunction函数

image.png

在compileToFunction函数中总共分成三步,首先先将模板变成AST树,在将AST树转化为render函数,最后利用with绑定指针指向,return出去

image.png

模板转变成AST树其实就是通过正则表达式+while循环不断截取模板的过程，并在这个过程中对模板标签进行合规校验

正则汇总

code27.png

核心代码

code28.png

解析标签和属性事件

code29.png

解析完成之后就是创建AST树结构并且进行赋值了

code30.png

到这一步基本上AST树就构建完成了，接下来就是将AST树转变成render函数
核心代码

code31.png

解析标签属性

code32.png

解析子标签

code33.png

new一个构造函数返回指定指针的render函数

code34.png

avatar
文章
阅读
粉丝