模版转成AST树的逻辑上的匹配过程

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

我们对前期工程已经搭建完了请看vue2模版编译前期工程搭建

模版转AST树我们简单捋一下顺序 拿到template模版(模版有一个优先级render()>template>el)->转化成AST树->render()->虚拟dom->设置patch->打补丁到真实dom

用过vue的应该都知道模版的优先级，就不过多介绍了，我们先来用代码来实现这个优先级

      el = document.querySelector(el) // 拿到跟节点
      vm.$el = el; // vm就是vue的构造函数
      if (options.render){ // 判读是否是render
        let template = options.template // 判断是否有模版
        if (!template&&el) { // 判断没有模版是否添加el节点
            template = el.outerHTML // 大家对这个outerHTML不不太熟悉和innerHTML相对应,outerHTML拿到包括fu jin
        }
        const render =  compileToRenderFunction(template) // 这个函数很重要这个需要把模版转AST树 再转成 render函数
        options.render = render  

我们可以看一下拿到html模版格式 template

<div id="app" style="color: blue; font-size: 20px;">
        你好 {{name}}
        <h2>{{name}}</h2>
        <ul>
            <li>{{age}}</li>
            <li>{{info.waek}}</li>
        </ul>
    </div>

compileToRenderFunction这个方法很重要，后面我们的大部分逻辑都是放在这个函数里的，所以我把他单独放在了compiler文件夹里了，

模版到AST的匹配过程咱们见到说一下，已我们拿到的html模版为例，我们首先匹配到是的“<div”我们拿到这个就会变成AST树的 {tag: 'div',type: 1,},完后会把“<div”删掉变成

id="app" style="color: blue; font-size: 20px;">
        你好 {{name}}
        <h2>{{name}}</h2>
        <ul>
            <li>{{age}}</li>
            <li>{{info.waek}}</li>
        </ul>
    </div>

我们会继续 匹配到id 和style对style的value 需要匹配成对象，变成AST树的格式是{ tag: 'div', type: 1, attrs: [ { name: 'id',value:'app' }, { name: 'style',value: { color: blue; font-size: 20p} } ]}

id="app" style="color: blue; font-size: 20px;">
        你好 {{name}}
        <h2>{{name}}</h2>
        <ul>
            <li>{{age}}</li>
            <li>{{info.waek}}</li>
        </ul>
    </div>

模板会变成

>
        你好 {{name}}
        <h2>{{name}}</h2>
        <ul>
            <li>{{age}}</li>
            <li>{{info.waek}}</li>
        </ul>
    </div>

匹配完成，就要把匹配完的删除掉，就是这么个匹配逻辑，vue2也是相同的匹配逻辑，这个模版变成空了，我们就是匹配完成了