虚拟DOM（Vue）

vue为什么使用虚拟DOM？

因为在早期jQuery，也是操作DOM的，只是操作的是真实DOM，随着时代的发展，页面的功能越来越多，需要操作的DOM也就越来越没有底线

真实DOM频繁触发会带来性能上的损耗，而且不利于维护，这并不是我们所看到的

如今，三大主流框架都是声明式操作DOM，只需要描述操作和DOM之间的映射关系是怎样的，框架会自动的将对应的状态渲染到视图上

虚拟DOM会根据状态生成一个虚拟节点，然后跟上一个虚拟节点对比（diff算法.），只渲染它们不同的部分，而且是像打补丁的形式（vue一点一点进行更新真实DOM，react是根据此次所有不同的虚拟DOM一次性去更新此次真实DOM）更新的

在Vue1.0的时候，每一个状态都会绑定一个watcher进行观察。当项目变得很大的时候，这个开销就会变得非常大。

所以在Vue2.0版本中取了一个折中的方案，为每个组件绑定一个watcher。状态发生改变的时候，只在组件内进行对比VNode，找出需要改变的VNode节点。

Vue模板

<template>
  <div id='app'>
    <span class='span'>hello Vue</span>
  </div>
</template>

VNode节点

{
  tag: 'div',
    data: {
    // 属性
    attr: {
      id: 'root',
    }
  },
  children: [
    {
      tag: 'span',
      data: {
        // 静态class
        staticClass: 'span',
      },
      children: [
        {
          tag: undefined,
          data: undefined,
          children: undefined,
          // 文本
          text: 'hello Vue',
        }
      ]
    }
  ],
    text: undefined,
}

总结：

每个 VNode 有 Children，Children 每个元素也是一个 VNode ，这样就形成了一个虚拟树结构，用于描述真实的DOM树结构