代碼生成器是模版編譯的最后以后，它的作用是將AST轉(zhuǎn)換成渲染函數(shù)中的內(nèi)容，這個(gè)內(nèi)容可以稱(chēng)為代碼字符串。
代碼字符串可以被包裝在函數(shù)中執(zhí)行，這個(gè)函數(shù)就是我們通常說(shuō)的渲染函數(shù)。
渲染函數(shù)被執(zhí)行之后，可以生成一份VNode，而虛擬DOM可以通過(guò)這個(gè)VNode來(lái)渲染視圖。
AST生成代碼字符串
比如下面這個(gè)代碼。
<div id="el">
hello {{name}}
</div>
它轉(zhuǎn)換成AST并且經(jīng)過(guò)優(yōu)化器的優(yōu)化之后是下面這個(gè)樣子。
{
"type": 1,
"tag": "div",
"attrsList": [
{
"name": "id",
"value": "el",
"start": 5,
"end": 12
}
],
"attrsMap": {
"id": "el"
},
"rawAttrsMap": {
"id": {
"name": "id",
"value": "el",
"start": 5,
"end": 12
}
},
"children": [
{
"type": 2,
"expression": "\"\\n hello \"+_s(name)+\"\\n \"",
"tokens": [
"\n hello ",
{
"@binding": "name"
},
"\n "
],
"text": "\n hello {{name}}\n ",
"start": 13,
"end": 41,
"static": false
}
],
"start": 0,
"end": 47,
"plain": false,
"attrs": [
{
"name": "id",
"value": "\"el\"",
"start": 5,
"end": 12
}
],
"static": false,
"staticRoot": false
}
代碼生成器可以通過(guò)上面這個(gè)AST來(lái)生成代碼字符串，生成后的代碼字符串。
with (this) {
return _c('div',
{ attrs: { "id": "el" } },
[_v("\n hello " + _s(name) + "\n ")]
)
}
仔細(xì)觀察生成后的代碼字符串，這是一個(gè)嵌套的函數(shù)調(diào)用。函數(shù)_c的參數(shù)中執(zhí)行了函數(shù)_v，而_v的參數(shù)中又執(zhí)行了_s。
這個(gè)字符串中_c其實(shí)是createElement的別名。createElement是虛擬DOM中所提供的方法，它的作用是創(chuàng)建虛擬節(jié)點(diǎn)，有三個(gè)參數(shù)，分別是：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-619885.html
- 標(biāo)簽名
- 一個(gè)包含模版相關(guān)屬性的數(shù)據(jù)對(duì)象
- 子節(jié)點(diǎn)列表
調(diào)用createElement方法，我們可以得到一個(gè)VNode。
這也就是是渲染函數(shù)可以生成VNode的原因：渲染函數(shù)其實(shí)是執(zhí)行了createElement，而createElement可以創(chuàng)建一個(gè)VNode。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-619885.html
到了這里，關(guān)于vuejs源碼閱讀之代碼生成器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
