vuejs源码阅读之代码生成器

代码生成器是模版编译的最后以后，它的作用是将AST转换成渲染函数中的内容，这个内容可以称为代码字符串。

代码字符串可以被包装在函数中执行，这个函数就是我们通常说的渲染函数。

渲染函数被执行之后，可以生成一份VNode，而虚拟DOM可以通过这个VNode来渲染视图。

AST生成代码字符串

比如下面这个代码。

<div id="el">hello {{name}}
</div>

它转换成AST并且经过优化器的优化之后是下面这个样子。

{"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
}

代码生成器可以通过上面这个AST来生成代码字符串，生成后的代码字符串。

with (this) {return _c('div',{ attrs: { "id": "el" } },[_v("\n        hello " + _s(name) + "\n    ")])
}

仔细观察生成后的代码字符串，这是一个嵌套的函数调用。函数_c的参数中执行了函数_v，而_v的参数中又执行了_s。

这个字符串中_c其实是createElement的别名。createElement是虚拟DOM中所提供的方法，它的作用是创建虚拟节点，有三个参数，分别是：

• 标签名
• 一个包含模版相关属性的数据对象
• 子节点列表
  调用createElement方法，我们可以得到一个VNode。

这也就是是渲染函数可以生成VNode的原因：渲染函数其实是执行了createElement，而createElement可以创建一个VNode。