JS每日一題：簡述一下Vue.js的template編譯過程？

20190215問

簡述一下Vue.js的template編譯過程？

先上一張圖大體看一下整個流程

從上圖中咱們能夠看到compile是從mount後開始進行中, 總體邏輯分爲三個部分

• 解析器(parse) - 將 模板字符串 轉換成 element ASTs
• 優化器(optimize) - 對 AST 進行靜態節點標記，主要用來作虛擬DOM的渲染優化
• 代碼生成器(generate) - 使用 element ASTs 生成 render 函數代碼字符串

開始前先解釋一下AST

AST(abstract syntax tree 抽象語法樹), 是源代碼的抽象語法結構的樹狀表現形式

從代碼上簡單理解一下

<div class="name">JS每日一題</div>
//轉成AST後會獲得以下格式
[
  {
    "type": "tag",
    "name": "div",
    "attribs": {
      "class": "name"
    },
    "children": [
      {
        "data": "JS每日一題",
        "type": "text",
        "next": null,
        "startIndex": 18,
        "prev": null,
        "parent": "[Circular ~.0]",
        "endIndex": 24
      }
    ],
    "next": null,
    "startIndex": 0,
    "prev": null,
    "parent": null,
    "endIndex": 30
  }
]

AST會通過generate獲得render函數，render的返回值是VNode, VNode的源碼能夠見 https://github.com/vuejs/vue/...

#### 解析器(parse)

源碼地址 https://github.com/vuejs/vue/...

parse 的目標是把 template 模板字符串轉換成 AST 樹，它是一種用 JavaScript 對象的形式來描述整個模板。那麼整個 parse 的過程是利用正則表達式順序解析模板，當解析到開始標籤、閉合標籤、文本的時候都會分別執行對應的回調函數，來達到構造 AST 樹的目的

優化器(optimize)

源碼地址 https://github.com/vuejs/vue/...

經過 optimize 把整個 AST 樹中的每個 AST 元素節點標記了 static 和 staticRoot, optimize 的過程，就是深度遍歷這個 AST 樹，去檢測它的每一顆子樹是否是靜態節點，若是是靜態節點則它們生成 DOM 永遠不須要改變

代碼生成器(generate)

源碼地址
https://github.com/vuejs/vue/...

把優化後的 AST 樹轉換成可執行的代碼

總結

首先經過parse將template解析成AST,其次optimize對解析出來的AST進行標記，最後generate將優化後的AST轉換成可執行的代碼

關於JS每日一題

JS每日一題能夠當作是一個語音答題社區
天天利用碎片時間採用60秒內的語音形式來完成當天的考題
羣主在第二天0點推送當天的參考答案

• 注 毫不僅限於完成當天任務，更可能是查漏補缺，學習羣內其它同窗優秀的答題思路

點擊加入答題