Vue源碼解析：模版字符串轉AST語法樹

王偉廷發布于2019-08-23 14:04 / 495人閱讀

摘要：通過對源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬第一次提交開始讀，準備陸續寫模版字符串轉語法樹語法樹轉函數雙向綁定原理虛擬比較原理其中包含自己的理解和源碼的分析，盡量通俗易懂由于是的最早提交，所以和最新版本有很多差異，后續將陸續補充，

通過對 Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準備陸續寫：

模版字符串轉AST語法樹

AST語法樹轉render函數

Vue雙向綁定原理

Vue虛擬dom比較原理

其中包含自己的理解和源碼的分析，盡量通俗易懂！由于是2.0的最早提交，所以和最新版本有很多差異、bug，后續將陸續補充，敬請諒解！包含中文注釋的Vue源碼已上傳...

問題

什么是AST？
AST（abstract syntax tree）意為抽象語法樹，其實就是樹形數據結構的表現形式，有父節點、子節點、兄弟節點等概念...

本身就是樹形結構的HTML為什么還要轉化？
因為真實DOM含不需要的屬性太多了，如果篩選出我們需要的屬性，再對其進行操作，將大大優化性能！

AST和虛擬節點vnode有什么關系？
它們結構很相似，AST其實算得上是vnode的前身，AST經過一系列的指令解析、數據渲染就會變成vnode！這邊的AST其實只是簡單的html解析。

開始

舉個

云服務器 GPU云服務器抽象語法樹 python 語法樹 vue源碼 php 字符串語法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100027.html

Vue源碼解析：模版字符串轉AST語法樹

摘要：通過對源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬第一次提交開始讀，準備陸續寫模版字符串轉語法樹語法樹轉函數雙向綁定原理虛擬比較原理其中包含自己的理解和源碼的分析，盡量通俗易懂由于是的最早提交，所以和最新版本有很多差異，后續將陸續補充，通過對 Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準備陸續寫：模版字符串轉AST語法...

chengjianhua 2019-08-02 16:07 評論0 收藏0
Vue源碼解析：AST語法樹轉render函數

摘要：源碼解析這邊解析的是從樹轉換成函數部分的源碼，由于第一次提交的源碼這部分不全，故做了部分更新，代碼全在文件夾中。入口整個語法樹轉函數的起點是文件中的函數明顯看到，函數傳入參數為語法樹，內部調用函數開始解析根節點容器節點。通過對 Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準備陸續寫：模版字符串轉AST語法樹 AST語法樹轉r...

trilever 2019-08-02 13:58 評論0 收藏0
Vue源碼解析：AST語法樹轉render函數

摘要：源碼解析這邊解析的是從樹轉換成函數部分的源碼，由于第一次提交的源碼這部分不全，故做了部分更新，代碼全在文件夾中。入口整個語法樹轉函數的起點是文件中的函數明顯看到，函數傳入參數為語法樹，內部調用函數開始解析根節點容器節點。通過對 Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準備陸續寫：模版字符串轉AST語法樹 AST語法樹轉r...

Karuru 2019-08-23 14:21 評論0 收藏0