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

NicolasHe 發布于2019-08-23 15:16 / 379人閱讀

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

20190215問

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

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

從上圖中我們可以看到compile是從mount后開始進行中, 整體邏輯分為三個部分

解析器(parse) - 將 模板字符串 轉換成 element ASTs

優化器(optimize) - 對 AST 進行靜態節點標記，主要用來做虛擬DOM的渲染優化

代碼生成器(generate) - 使用 element ASTs 生成 render 函數代碼字符串

開始前先解釋一下AST

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

從代碼上簡單理解一下

JS每日一題
//轉成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點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點擊加入答題

云服務器 GPU云服務器簡述入侵檢測的過程語言的編譯過程 Vue.js vue.js 屬性

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

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

JS每日一題: 請簡述一下vuex實現原理

摘要：給的實例注入一個的屬性，這也就是為什么我們在的組件中可以通過訪問到的各種數據和狀態源碼位置，是怎么實現的源碼位置是對的的初始化，它接受個參數，為當前實例，為的，為執行的回調函數，為當前模塊的路徑。 20190221 請簡述一下vuex實現原理對vuex基礎概念有不懂的可以點這里 vuex實現原理我們簡單過一遍源碼地址 https://github.com/vuejs/vuex 首...

JohnLui 2019-08-23 15:25 評論0 收藏0
JS每日一題:Webpack有哪些常見的Plugin？他們是解決什么問題的

摘要：期有哪些常見的他們是解決什么問題的定義音譯過來就是插件在中插件目的在于解決無法實現的其他事插件是一個具有屬性的對象。 20190327期 Webpack有哪些常見的Plugin？他們是解決什么問題的定義: 音譯過來就是插件, 在webpack中, 插件目的在于解決 loader 無法實現的其他事 webpack 插件是一個具有 apply 屬性的 JavaScript 對象。appl...

songze 2019-08-23 16:31 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

zacklee 2019-08-30 15:55 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

lbool 2019-08-23 14:52 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

Alex 2019-08-02 14:09 評論0 收藏0