Vue中必须掌握的的虚拟Dom（精炼版）

最近回看自己写的Vue中必须掌握的的虚拟Dom，感觉有点啰嗦，于是特作此篇，提炼出重点，方便回看。

为什么要采用虚拟dom?

因为vue是数据驱动的，数据改变就要引发视图更新，但如果操作真实的dom，对内存消耗较大，于是我们用js对象来模拟真实的dom节点，通过操作虚拟dom，来实现对真实dom 的改变。

虚拟dom如何工作？

首先，vue中存在一个VNode类，通过它可以实例化各种类型的节点，包括文本节点 元素节点 注释节点等，在页面渲染之前，会先将template模板编译成vnode并进行缓存，然后等到数据发生改变的时候，用当前的vnode和缓存的vnode进行diff算法的比较，然后将变化的部分应用到真实的dom中。

需要注意的是，虚拟dom很多时候都不是最优的操作，通过手工优化可能比diff更好，但是手工操作费时费力且维护性不高，diff操作是一种普适的折中的方法。

diff算法

diff算法采用分层比较，不会跨层级进行比较，即当前层两个vnode节点不同，直接用新的覆盖，不会再向下进行比较。

<!-- 层级1 -->
<div>
  <!-- 层级2 -->
  <p>
    <!-- 层级3 -->
    <b> aoy </b>
    <span>diff</span>
  </p>
</div>

<!-- 层级1 -->
<div>
  <!-- 层级2 -->
  <p>
    <!-- 层级3 -->
    <b> aoy </b>
  </p>
  <span