成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

NicolasHe / 404人閱讀

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

20190215問

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

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

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

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

優(yōu)化器(optimize) - 對 AST 進(jìn)行靜態(tài)節(jié)點標(biāo)記，主要用來做虛擬DOM的渲染優(yōu)化

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

開始前先解釋一下AST

AST(abstract syntax tree 抽象語法樹), 是源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式

從代碼上簡單理解一下

JS每日一題

//轉(zhuǎn)成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會經(jīng)過generate得到render函數(shù)，render的返回值是VNode, VNode的源碼可以見 https://github.com/vuejs/vue/...

#### 解析器(parse)

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

parse 的目標(biāo)是把 template 模板字符串轉(zhuǎn)換成 AST 樹，它是一種用 JavaScript 對象的形式來描述整個模板。那么整個 parse 的過程是利用正則表達(dá)式順序解析模板，當(dāng)解析到開始標(biāo)簽、閉合標(biāo)簽、文本的時候都會分別執(zhí)行對應(yīng)的回調(diào)函數(shù)，來達(dá)到構(gòu)造 AST 樹的目的

優(yōu)化器(optimize)

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

通過 optimize 把整個 AST 樹中的每一個 AST 元素節(jié)點標(biāo)記了 static 和 staticRoot, optimize 的過程，就是深度遍歷這個 AST 樹，去檢測它的每一顆子樹是不是靜態(tài)節(jié)點，如果是靜態(tài)節(jié)點則它們生成 DOM 永遠(yuǎn)不需要改變

代碼生成器(generate)

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

把優(yōu)化后的 AST 樹轉(zhuǎn)換成可執(zhí)行的代碼

總結(jié)

首先通過parse將template解析成AST,其次optimize對解析出來的AST進(jìn)行標(biāo)記，最后generate將優(yōu)化后的AST轉(zhuǎn)換成可執(zhí)行的代碼

關(guān)于JS每日一題

JS每日一題可以看成是一個語音答題社區(qū)
每天利用碎片時間采用60秒內(nèi)的語音形式來完成當(dāng)天的考題
群主在次日0點推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點擊加入答題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101786.html

相關(guān)文章

  • JS每日一題: 請簡述一下vuex實現(xiàn)原理

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

    JohnLui 評論0 收藏0

  • JS每日一題:Webpack有哪些常見的Plugin？他們是解決什么問題的

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

    songze 評論0 收藏0

  • 前端知識點(二)

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

    zacklee 評論0 收藏0

  • 前端知識點(二)

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

    lbool 評論0 收藏0

  • 前端知識點(二)

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

    Alex 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<