源码 流程图
源码解读
Vue.js2.0中有两种生成方式：第一种是直接在Vue对象的option中添加render字段；第二种是像Vue.js 1.x版本那样写一个模板或者指定一个el根元素，它会首先转换成模板，经过HTMI语法解析器生成一个 ast 抽象语法树，对语法树做优化，然后把语法树转换成代码片段，最后通过代码片段生成function添加到option的render字段中。
在整个过程中，特别值得一提的是ast语法树优化的过程，它主要做了两件事情：
- 会检测出静态的class名和attributes，这样它们在初始化渲染之后就永远都不会再被比
对了。 - 会检测出最大的静态子树（就是不需要动态性的子树）并且从渲染函数中萃取出来。这
样在每次重渲染时，它就会直接重用完全相同的Vnode，同时跳过比对。
接下来我们可以通过一段简单的代码看一下编译后的渲染函数。代码示例如下：
<div id="app">
<h1>Hello {{who}}</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
who:'DDFE'
}
})
</script>
经过一系列的编译操作之后生成的render方法。示例如下：
with (this) (
return _h(_e('div',
{staticAttrs;{"id":"app"}}),
[_h(_e('h1'),
）]
[("Hello "+ _s(who))]
})
