# VNode
# VNode是什么
- 虚拟节点，不是真的DOM节点
- 用JS对象来描述真实DOM
<div class="parent" style="height:0" href="222">111</div>
// 使用VNode构造函数可以生成如下的VNode
{
tag:'div',
data:{
attrs:{href:"222"},
staticClass:"parent",
staticStyle:{height:"0"}
},
children:[{
tag:undefined,
text:"111"
}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# VNode有什么用
- 兼容性强：VNode是JS对象，不管是Node还是浏览器都可以统一操作，从而获得了服务端渲染、原生渲染、手写渲染函数等能力
- 减少DOM操作：任何页面的变化，都只使用VNode进行操作对比，只需要在最后一步挂载更新DOM