作用： 將vue模板通過一系列過程處理，變成可以生成返回vnode的渲染函數。從而通過vnode渲染頁面

將模板編譯成渲染函數

大體可以分為三部分：

  1. 解析器：將模板編譯成AST(Abstract Syntax Tree)抽象語法樹。本質就是和vnode差不多的不同js對象
  2. 優化器：： 遍歷AST，標記靜態節點和靜態根節點
  3. 代碼生成器：：使用AST生成渲染函數

1. 解析器

AST: 其實就是用js中的對象表示一個個的節點，一個對象代表一個節點。

解析器內部有很多子解析器，比如html解析器、文本解析器、過濾器解析器。最主要的是html解析器

html解析器

html解析器在遍歷模板字符串的過程中，會不斷觸發鈎子函數。html節點類型分為：元素節點、文本節點、註釋節點

// 模板字符串
var template = `<div class="pack">
         <!-- 我是註釋 -->
         <h2>這是標題</h2>
         <p>我是段落內容</p>
       </div>`

// parseHtml沒解析出一個一塊內容，就會從模板字符串中去掉該部分
parseHtml (template, {
  start(tag, attrs, unary) {
    // 當解析到開始標籤位置時觸發
  },
  end (){
   // 當解析到結束標籤位置時觸發
 }，
  chars (){
   // 當解析到文本節點時觸發
 }，
  comment (){
   // 當解析到註釋節點時觸發
 } 
})

怎樣表示節點之間的層級關係：棧。每當解析出一個開始標籤，觸發狗子start鈎子函數的同時，將這個標籤推入棧中，作為後面解析出來的標籤對象的父節點對象；每當解析出一個結束標籤時，就將棧中最右邊的標籤對象彈出來；始終以棧中最右邊的標籤作為下面解析出來的額標籤的父節點對象

補充：棧還可以用來檢測html標籤是否正確閉合。噹噹前解析出的結束標籤和棧中最右邊的標籤不一致，則在控制枱打印警告提示

html解析器的運行的原理
  1. 截取開始標籤
  • 標籤名
  • 屬性
  • 解析自閉合標籤
  1. 截取結束標籤
  2. 截取註釋節點
  3. 截取條件註釋（是什麼東西）
  4. 截取DOCTYPE
  5. 截取文本
  6. 純文本元素解析：