vue2 中 template 转换成 ast 过程简介

这篇文章主要简单介绍 template 转换成 ast 的过程，也就是 vue 中 parse 的过程。

假设 template 模版为

const template = `<div>
    <div style='color: red'>{
   {count}}</div>
    <button @click="addCount">addCount</button>
</div>`

首先要了解一下 html parser，vue 中的 parseHTML 是从 simplehtmlparser 修改来的，simplehtmlparser 代码链接：http://erik.eae.net/simplehtmlparser/simplehtmlparser.js

parseHTML 过程其实就是从前向后的字符串匹配过程。html parser 的主要思想如下，从前向后匹配出 html 标签名称、属性、文本节点内容、注释等等，触发对应的回调函数，其中 s 是输入的字符串模版，contentHandler 是匹配到内容后执行的回调函数。

function parseHTML(s, contentHandler) {
    while (s.length > 0) {
        // Comment
        if (s.substring(0, 4) == "<!--") {
            index = s.indexOf("-->");
            i