概念

平時(shí)使用模板時(shí)，可以在模板中使用變量、表達(dá)式或者指令等，這些語法在html中是不存在的，那vue中為什么可以實(shí)現(xiàn)？這就歸功于模板編譯功能。
模板編譯的作用是生成渲染函數(shù)，通過執(zhí)行渲染函數(shù)生成最新的vnode，最后根據(jù)vnode進(jìn)行渲染。那么，如何將模板編譯成渲染函數(shù)？

image

將模板編譯成渲染函數(shù)

此過程可以分成兩個(gè)步驟：先將模板解析成AST（abstract syntax tree,抽象語法樹），然后使用AST生成渲染函數(shù)。
由于靜態(tài)節(jié)點(diǎn)不需要總是重新渲染，所以生成AST之后，生成渲染函數(shù)之前這個(gè)階段，需要做一個(gè)優(yōu)化操作：遍歷一遍AST，給所有靜態(tài)節(jié)點(diǎn)做一個(gè)標(biāo)記，這樣在虛擬DOM中更新節(jié)點(diǎn)時(shí)，如果發(fā)現(xiàn)這個(gè)節(jié)點(diǎn)有這個(gè)標(biāo)記，就不會(huì)重新渲染它。
所以，在大體邏輯上，模板編譯分三部分內(nèi)容：
1、將模板解析成AST
2、遍歷AST標(biāo)記靜態(tài)節(jié)點(diǎn)
3、使用AST生成渲染函數(shù)
這三部分內(nèi)容在模板編譯中分別抽象出三個(gè)模塊實(shí)現(xiàn)各自的功能：解析器、優(yōu)化器和代碼生成器。

image