1 回答

TA貢獻1793條經(jīng)驗 獲得超6個贊
整個模板被編譯成一個大的 JavaScript 渲染函數(shù)。當(dāng)呈現(xiàn)該元素的 vnode 時,屬性和 prop 綁定被內(nèi)聯(lián)評估。
這個模板:
<div v-html="'abc' + ' ' + message + ' ' + 2 * num"></div>
被編譯成類似的東西:
vnode = _c('div', {
? domProps: {
? ? "innerHTML": _s('abc' + ' ' + message + ' ' + 2 * num)
? }
})
整個 render 函數(shù)被包裹在一條with(this) { ... }
語句中,這樣組件實例的屬性就可以message
像this.message
.
沒有eval()
發(fā)生,直接執(zhí)行就好像你手寫了render函數(shù)一樣。模板編譯器代碼可能會new Function()
?在編譯時使用來檢查語法是否有效,但在應(yīng)用程序執(zhí)行期間不會執(zhí)行此類沙盒。
這個在線 Vue 2 模板編譯器展示了如何將模板編譯成渲染函數(shù)。
Vue 3 以不同的方式編譯模板并且更加優(yōu)化。使用Vue Template Explorer來試驗一下。
添加回答
舉報