Vue

createElement--> createNodeDescription: 因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。
我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。

最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性

我们通过patch 的核心----diff 算法，找出本次DOM需要更新的节点来更新，其他的不更新。

Vue的diff算法是基于snabbdom改造过来的，仅在同级的vnode间做diff，递归地进行同级vnode的diff，最终实现整个DOM树的更新

diff 算法----粗略介绍以下两个核心函数实现流程：patch(container,vnode) :
- 初次渲染的时候，将VDOM渲染成真正的DOM然后插入到容器里面。patch(vnode,newVnode):
- 再次渲染的时候，将新的vnode和旧的vnode相对比，然后之间差异应用到所构建的真正的DOM树上。

Vue 2.0 引入 vdom 的主要原因是 vdom 把渲染过程抽象化了，从而使得组件的抽象能力也得到提升，并且可以适配 DOM 以外的渲染目标。
不再依赖 HTML 解析器进行模版解析，可以进行更多的 AOT 工作提高运行时效率：通过模版 AOT 编译，Vue 的运行时体积可以进一步压缩，运行时效率可以进一步提升；
跨平台: 可以渲染到 DOM 以外的平台，
实现 SSR、同构渲染这些高级特性，Weex 等框架应用的就是这一特性。

<p>Message is: {{ message }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
var v = new Vue({
el: '#app',
data: {
message: '这是内容'
}
});

var v = new Vue({
el: '#app',
data: {
message: '这是内容'
},
render: function (createElement) {
return createElement('p', 'Message is:' + this.message)
}
});

var MyComponent = {
data () {
return {
message: '这是内容'
}
},
template: `
<div id="app">
<input v-model="message">
<p>Message is: {{ message }}</p>
</div>
`
};

这种方式是绝大部分Vue项目（官方脚手架就是采用该渲染方式）的渲染方式

模板编译