Vue編譯器AST抽象語法樹源碼分析

3403771864 發布于2022-09-21 22:09 / 640人閱讀

　直接進入核心現在說說baseCompile核心代碼：　

　// `createCompilerCreator` allows creating compilers that use alternative
　　// parser/optimizer/codegen, e.g the SSR optimizing compiler.
　　// Here we just export a default compiler using the default parts.
　　var createCompiler = createCompilerCreator(function baseCompile(
　　template,
　　options
　　) {
　　var ast = parse(template.trim(), options);
　　if (options.optimize !== false) {
　　}
　　var code = generate(ast, options);
　　return {
　　ast: ast,
　　render: code.render,
　　staticRenderFns: code.staticRenderFns
　　}
　　});

　　在 baseCompile核心代碼中，var ast =parse(template.trim(), options); parse 是通過用等方式解析 template 模板中的指令、class、style等數據，形成AST。

　　其中有一處優化節點就是optimize(ast, options); optimize ，這樣可以標記 static 靜態節點，可以當 update 更新界面時，會產生一個 patch 的過程， diff 算法會直接跳過靜態節點，這樣極大的減少比較的過程，從而優化了 patch 的性能。

　　而var code =generate(ast, options); 主要就是為了生成目標平臺所需的代碼，這樣可以讓 AST 轉變成 render function 字符串的過程，最終得到 render 的字符串以及 staticRenderFns 字符串。

　　最終 baseCompile 的返回值

　　{
　　ast: ast,
　　render: code.render,
　　staticRenderFns: code.staticRenderFns
　　}

　　最終返回了抽象語法樹( ast )，渲染函數( render )，靜態渲染函數( staticRenderFns )，且render 的值為code.render ，staticRenderFns 的值為code.staticRenderFns ，也就是說通過 generate 處理 ast 之后得到的返回值 code 是一個對象 ...

　　現在我們主要講講在 Vue 的 parser，如何將它字符串模板解析為抽象語法樹(AST)的。

　　var ast = parse(template.trim(), options);

　　在講解parse之前，我們先要了解下對于編譯過程以及其中一些詳細技術要點。

　　引用自維基百科:

　　它主要的目的是將便于人編寫、閱讀、維護的高級計算機語言所寫作的源代碼程序，翻譯為計算機能解讀、運行的低階機器語言的程序。源代碼一般為高階語言（High-level language），如Pascal、C、C++、C# 、Java等，而目標語言則是匯編語言或目標機器的目標代碼（Object code）。

　　編譯器的技術分為詞法分析、語法分析和語義分析三個部分，通常編譯器的第一項工作叫做詞法分析。其實就如同讀一篇文章，文章的內容就是由一個個的中文單詞組成的。換而言之我們可以將程序處理也這樣想，它叫做“詞法記號”，英文叫 Token。

　　<div id="app" v-if="ret">{{ message }}</div>

　　編譯器會識別出 div a span 這些標簽，id class style v-if v-for 這樣的屬性、指令，還有花括號符號這樣的插值操作...等。這些都是 Token。

　　如何寫一個程序來識別 Token

　　那么，如何寫一個程序來識別 Token 呢？

　　在編寫程序時，我們要區分不同的Token，在此之中要利用一些規則來表達“正則文法”。主要就是符合正則文法的表達式稱為“正則表達式”。以此來完成詞法分析工作。

　　編譯器下一個階段的工作是語法分析。詞法分析是識別一個個的單詞，而語法分析就是在詞法分析的基礎上識別出程序的語法結構。這個結構是一個樹狀結構，是計算機容易理解和執行的。

　　程序也要定義良好的語法結構，它的語法分析過程，就是構造這么一棵樹。一個程序就是一棵樹，這棵樹叫做抽象語法樹（Abstract Syntax Tree，AST）。樹的每個節點（子樹）是一個語法單元，這個單元的構成規則就叫“語法”。

　　現在我們來說說parser，這是在編譯器對源代碼處理的第一步，parser主要就是用來把某種特定格式的文本（字符串）轉換成某種數據結構的程序(對象)，而且編譯器能夠理解這個數值。可以不想編譯器在后續步驟中的做有用，舉例上面提到的句法分析，類型檢查/推導，代碼優化，代碼生成等等都依賴于該數據結構。

　　注：parse & parser 這兩個單詞，不要混淆，parse 是動詞，代表“解析”的過程，parser 是名詞，代表“解析器”。

　　Vue 的編譯器也不例外, 在詞法分析階段 Vue 會把字符串模板解析成一個個的令牌(token)，該令牌將用于句法分析階段，在句法分析階段會根據令牌生成一棵 AST，最后再根據該 AST生成最終的渲染函數，這樣就完成了代碼的生成。

　　var ast = parse(template.trim(), options);

　　parse 函數解析模板字符串

　　回歸到剛剛的代碼，已知 parse 函數就是用來解析模板字符串的，最終生成AST。

　　function parse(template, options) {
　　// 省略...
　　parseHTML(template, {
　　warn,
　　expectHTML: options.expectHTML,
　　isUnaryTag: options.isUnaryTag,
　　canBeLeftOpenTag: options.canBeLeftOpenTag,
　　shouldDecodeNewlines: options.shouldDecodeNewlines,
　　shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
　　shouldKeepComment: options.comments,
　　start (tag, attrs, unary) {
　　// 省略...
　　},
　　end () {
　　// 省略...
　　},
　　chars (text: string) {
　　// 省略...
　　},
　　comment (text: string) {
　　// 省略...
　　}
　　})
　　return root
　　}

　　parse 函數內部主要通過調用parseHTML 函數對模板字符串進行解析，簡單來說就是用來做詞法分析的。不同的是而arse函數的作用則是在詞法分析的基礎上做句法分析從而生成一棵AST。

　　以上就是Vue編譯器AST抽象語法樹源碼分析的詳細內容，請大家關注更多后續精彩內容。

云服務器 GPU云服務器抽象語法樹 python 語法樹 vue源碼 vue webrtc 源碼

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

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

vue分析之template模板解析AST

摘要：注意看注釋很粗很簡單，我就是一程序員姓名，年齡，請聯系我吧是否保留注釋定義分隔符，默認為對于轉成，則需要先獲取，對于這部分內容，做一個簡單的分析，具體的請自行查看源碼。其中的負責修改以及截取剩余模板字符串。通過查看vue源碼，可以知道Vue源碼中使用了虛擬DOM（Virtual Dom），虛擬DOM構建經歷 template編譯成AST語法樹 -> 再轉換為render函數最終返回...

2bdenny 2019-08-22 18:24 評論0 收藏0
Vue源碼解析之Template轉化為AST

摘要：下面用具體代碼進行分析。匹配不到那么就是開始標簽，調用函數解析。如這里的轉化為加上是為了的下一步轉為函數，本文中暫時不會用到。再把轉化后的內容進。什么是AST 在Vue的mount過程中，template會被編譯成AST語法樹，AST是指抽象語法樹（abstract syntax tree或者縮寫為AST），或者語法樹（syntax tree），是源代碼的抽象語法結構的樹狀表現形式。...

huangjinnan 2019-08-21 17:00 評論0 收藏0
JS每日一題：簡述一下Vue.js的template編譯過程？

摘要：問簡述一下的編譯過程先上一張圖大致看一下整個流程從上圖中我們可以看到是從后開始進行中整體邏輯分為三個部分解析器將模板字符串轉換成優化器對進行靜態節點標記，主要用來做虛擬的渲染優化代碼生成器使用生成函數代碼字符串開始前先解釋一下抽象 20190215問簡述一下Vue.js的template編譯過程？先上一張圖大致看一下整個流程showImg(https://image-static....

NicolasHe 2019-08-23 15:16 評論0 收藏0
聊聊Vue.js的template編譯

摘要：具體可以查看抽象語法樹。而則是帶緩存的編譯器，同時以及函數會被轉換成對象。會用正則等方式解析模板中的指令等數據，形成語法樹。是將語法樹轉化成字符串的過程，得到結果是的字符串以及字符串。里面的節點與父節點的結構類似，層層往下形成一棵語法樹。寫在前面因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。文...

gnehc 2019-08-21 16:56 評論0 收藏0
Vue源碼解析：模版字符串轉AST語法樹

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

chengjianhua 2019-08-02 16:07 評論0 收藏0