中国福彩网双色球号码|中国福彩网刮刮乐

全國咨詢熱線:400-618-4000

Vue 的 template 是如何編譯成真正的 HTML

創建時間:2019年01月10日15時32分

1. 首先第一步實例化一個vue項目
2. 模板編譯是在vue生命周期的mount階段進行的
3. 在mount階段的時候執行了compile方法將template里面的內容轉化成真正的html代碼
4. parse階段是將html轉化成ast(抽象語法樹),用來表示代碼的數據結構。在 Vue 中我把它理解為嵌套的、攜帶標簽名、屬性和父子關系的 JS 對象,以樹來表現 DOM 結構。 
[JavaScript] 純文本查看 復制代碼
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
html: "<div id="test">texttext</div>"
    //html轉換成ast
    ast: {
    // 標簽類型
    type: 1,
    // 標簽名
    tag: "div",
    // 標簽行內屬性列表
    attrsList: [{name: "id", value: "test"}],
    // 標簽行內屬性
    attrsMap: {id: "test"},
    // 標簽關系 父親
    parent: undefined,
    // 字標簽屬性列表
    children: [{
        type: 3,
        text: 'texttext'
      }
    ],
    plain: true,
    attrs: [{name: "id", value: "'test'"}]
  }

5. optimize 會對parse生成的ast樹進行靜態資源優化(靜態內容指的是和數據沒有關系,不需要每次都刷新的內容)
6. generate 函數,會將每一個ast節點創建一個內部調用的方法等待后面的調用。
[JavaScript] 純文本查看 復制代碼
1
2
3
4
5
6
7
8
9
<template>
  <div id="test">
    {{val}}
    <img src="http://xx.jpg">
  </div>
</template>
//最后輸出
{render: "with(this){return _c('div',{attrs:{"id":"test"}},[[_v(_s(val))]),_v(" "),_m(0)])}"}

7. 在complie過程結束之后會生成一個render字符串 ,接下來就是 new watcher這個時候會對綁定的數據執行監聽,render 函數就是數據監聽的回調所調用的,其結果便是重新生成 vnode。當這個 render 函數字符串在第一次 mount、或者綁定的數據更新的時候,都會被調用,生成 Vnode。如果是數據的更新,那么 Vnode 會與數據改變之前的 Vnode 做 diff,對內容做改動之后,就會更新到我們真正的 DOM 上啦 



作者:傳智播客前端與移動開發培訓學院

首發: http://web.itcast.cn

中国福彩网双色球号码