麻雀的确可爱，它的脑袋很小，只有栗子那么大，眼晴虽小却非常有神，它的身体小巧成蛋状流线型，放在手上只占手掌的一半。它浑身长着灰褐色羽毛，和树皮色相似，是一种保护色，它颈部和腹部的毛发白，显得很匀称，它的尾巴像半张开的小扇子。它飞得很快，也很有趣，那么一窜窜的。
虚拟 DOM
什么是虚拟 dom
dom 是文档对象模型，以节点树的形式来表现文档。
虚拟 dom 不是真正意义上的 dom。而是一个 javascript 对象。
正常的 dom 节点在 html 中是这样表示：
<div class='testId'>
<p>你好</p>
<p>欢迎光临</p>
</div>
而在虚拟 dom 中大概是这样：
{
tag: 'div',
attributes:{
class: ['testId']
},
children:[
// p 元素
// p 元素
]
}
我们可以将虚拟 dom 拆分成两部分进行理解：虚拟 + dom。
- 虚拟: 表示虚拟 dom 不是真正意义上的 dom，而是一个 javascript 对象；
- dom: 表示虚拟 dom 能以类似节点树的形式表示文档。
虚拟 dom 的作用
现在主流的框架都是声明式操作 dom 的框架。我们只需要描述状态与 dom 之间的映射关系即可，状态到视图（真实的 dom）的转换，框架会帮我们做。
最粗暴的做法是将状态渲染成视图，每次更新状态，都重新更新整个视图。
这种做法的性能可想而知。比较好的想法是：状态改变，只更新与状态相关的 dom 节点。虚拟 dom 只是实现这个想法的其中一种方法而已。
具体做法：
- 状态 -> 真实 dom（最初）
- 状态 -> 虚拟 dom -> 真实 dom（使用虚拟 dom）
状态改变，重新生成一份虚拟 dom，将上一份和这一份虚拟 dom 进行对比，找出需要更新的部分，更新真实 dom。
vue 中的虚拟 dom
真实的 dom 是由 节点（Node）组成，虚拟 dom 则是由虚拟节点（vNode）组成。
虚拟 dom 在 vue 中主要做两件事：
- 提供与真实节点（Node）对应的虚拟节点（vNode）
- 将新的虚拟节点与旧的虚拟节点进行对比，找出需要差异，然后更新视图
“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼 —— vue 官网
vNode
什么是 vNode
上文提到，vNode（虚拟节点）对应的是真实节点（Node）。
vNode 可以理解成节点描述对象。描述了如何创建真实的 dom 节点。
vue.js 中有一个 vNode 类。可以使用它创建不同类型的 vNode 实例，不同类型的 vNode 对应着不同类型的 dom 元素。代码如下：
export default class VNode {
constructor (
tag?: string,
data?: VNodeData,
children?: ?Array<VNode>,
text?: string,
elm?: Node,
context?: Componen