Vue模版字符串轉AST語法樹

  前言：
     通過對 Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從[尤大佬2016.4.11第一次提交][1]開始讀...
     準備陸續寫：
         - 模版字符串轉AST語法樹
         - AST語法樹轉render函數
         - Vue雙向綁定原理
         - Vue虛擬dom比較原理
         - ...
     其中包含自己的理解和源碼的分析，儘量通俗易懂！由於是2.0的最早提交，所以和最新版本有很多差異、很多bug，後續會陸續補充，敬請諒解！
     已經將[包含中文註釋的Vue源碼][2]上傳到了我的git...

問題

**什麼是AST？**
    AST（abstract syntax tree）意爲抽象語法樹，其實就是樹形數據結構的表現形式，有父節點、子節點、兄弟節點等概念...
**本身就是樹形結構的HTML爲什麼還要轉化？**
    因爲真實DOM含不需要的屬性太多了，如果賽選出我們需要的屬性，在對其進行操作，將大大優化性能！
**AST和虛擬節點vnode有什麼關係？**
    它們結構很相似，AST其實算得上是vnode的前身，AST經過一系列的指令解析、數據渲染就會變成vnode！這邊的AST其實只是簡單的html解析。
    

開始

我們先看看輸入和輸出，
```
<div class="container">
    <span :class="{active: isActive}">{{this.msg}}</span>
    <ul>
        <li v-for="item in list">{{item + $index}}</li>
    </ul>
    <button @click="handle">change msg</button>
</div>
```

![clipboard.png](/img/bVbk06D)