一、 模板編譯

• 模板編譯介紹：模板編譯的主要目的是將模板（template）轉(zhuǎn)換為渲染函數(shù)（render）

<div>
  <h1 @click="handler">title</div>
  <p>some content</p>
</div>

• 渲染函數(shù)

render(h){
  return h('div',[
    h('h1',{ on: {click:this.handler } },'title' ),
    h('p','some content')
  ])
}

• 模板編譯的作用
  • Vue2.x使用VNode描述視圖以及各種交互，用自己編寫的VNode比較復雜
  • 用戶只需要編寫類似HTML代碼 - Vue.js模板，通過編譯器將模板轉(zhuǎn)換為返回VNode的render函數(shù)
  • .vue文件會被webpack在構建的過程中轉(zhuǎn)換成render函數(shù)

二、Vue Template Explorer 網(wǎng)頁工具

• 將html模板轉(zhuǎn)換為render函數(shù)

三、 模板編譯

image.png

• 什么是抽象語法樹
  • 抽象語法樹建成AST（Abstract SyntaxTree）
  • 使用對象的形式描述樹形的代碼結(jié)構
  • 此處的抽象語法樹是用來描述樹形結(jié)構的HTML字符串

四、baseCompile -- AST

• 為什么要使用抽象語法樹
  • 模板字符串轉(zhuǎn)換成AST后，可以通過AST對模板做優(yōu)化處理
  • 標記模板中的靜態(tài)內(nèi)容，在patch的時候直接跳過靜態(tài)內(nèi)容

  • 在patch的過程中靜態(tài)內(nèi)容不需要對比和重新渲染

    
    
    image.png

五、 模板編譯過程--總結(jié)

image.png

六、組件化回顧

• 一個Vue組件就是一個擁有預定義選項的一個Vue實例
• 一個組件可以組成頁面上的一個功能完備的區(qū)域，組件可以包含腳本、樣式、模板

七、組件注冊

• 全局組件
• 局部組件

image.png

八、 Vue.extend

image.png

九、組件的創(chuàng)建過程

image.png