vue-comp.png

組件渲染到頁面的過程

template --> ast --> render --> vDom --> 真實(shí)的Dom --> 頁面
ast：抽象語法樹
vDom：虛擬Dom
template最終還是會(huì)被渲染為 render函數(shù)

Runtime Only （只包含運(yùn)行時(shí)的版本）

1、指定render函數(shù)，如上圖
2、通常借助webpack的vue-loader工具，在構(gòu)建時(shí)進(jìn)行了預(yù)編譯（將.vue文件編譯為js）。所以該版本只包含運(yùn)行時(shí)的 Vue.js 代碼
3、webpack打包時(shí)已經(jīng)將template編譯為render函數(shù)(template 會(huì)通過 vue-template-compiler 轉(zhuǎn)換為 render 函數(shù))，不需要在客戶端進(jìn)行編譯

runtime-compiler（包含編譯器和運(yùn)行時(shí)的版本）

• 編譯器：用來將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼。
  1、有指定template字符串，如上圖，或者掛載到一個(gè)元素上并以其 DOM 內(nèi)部的 HTML 作為模板
  2、如果沒有對(duì)代碼做預(yù)編譯，但又使用了 Vue 的 template 屬性并傳入一個(gè)字符串，需要在客戶端編譯模板
  3、打包時(shí)不進(jìn)行編譯，在運(yùn)行的時(shí)候，才去編譯 template
  4、體積較大，