本来是想写一篇超详细，跟着一步一步做就能搞出一个简单框架的笔记的。但写了一半变化检测才发现太难了，因为一个程序总是在一步一步解决问题的过程写出来的，想要每步按顺序写出来并加以解释太累了。只能是摘要说明了。
为了将DOM和数据绑定在一起，我们需要将HTML模板解析成AST，然后再根据AST生成渲染函数。最后通过渲染函数渲染出整个页面。本章讲的就是将模板解析成AST的过程。即将：
<div>
<span>{{message}}</span>
</div>
编译成类似以下对象
{
type: 1,
tag: "div",
attrsList: [],
attrsMap: {},
children: [
{
type: 1,
tag: "span",
attrsList: [],
attrsMap: {},
parent: {tag:"div"...},
children: [],
text: "{{message}}",
expression: "_s(message)",
hasBindings: false
}
],
text: "\n ",
expression: null,
hasBindings: false
}
Vue的解析是采用正则进行匹配的方式，但因为正则表达式实在太反人类了，我即写不出也理解不了，所以我选择用逐个字符读出来的方式来实现解析。通过遍历模板字符串，当遇到关键的字符则交给对应的函数进行处理，类似状态机的形式：
image.png
TO BE CONTINUED
