Vue复习：虚拟DOM和diff算法

1、虚拟DOM

虚拟DOM，也就是虚拟节点，本质上是使用js对象来模拟真实DOM中存在的节点，这个对象具有真实DOM的特性。
如：
真实dom：

  
dom元素

虚拟dom：

{
    tag:'div',
    attrs:{
      // 表示该节点的属性
       id:'app'
    },
    children:[
      {
        tag:'h1',
        text:'dom元素'
      }
    ]
}

1.1、使用虚拟DOM的原因

不断的修改真实的DOM会引发回流和重绘，大大降低了页面的渲染能力，而虚拟DOM的产生则是减少了频繁操作DOM而带来的一系列性能问题。

1.2、使用虚拟DOM真正的意义

虚拟DOM的频繁改变会产生一系列性能问题，而使用虚拟DOM替代真实DOM，最大的优势在于不断的去修改虚拟DOM后，才会一次性的与真实DOM的差异性做对比，然后只会去修改真实的DOM一次。而这种差异性对比，也就是diff算法。

2、diff算法

当虚拟DOM的某个节点发生了变化，会生成一个新的VNode，然后通过新的VNode与之前的旧的VNode进行对比，把不同的地方修改在真实的DOM上，在将旧的VNode更新节点的值。
diff过程的核心就是去使用patch函数，对比新老节点，然后修改真实DOM。

过程.png

图片是从其他地方引入的。

diff过程：

• 1、按照树的层级划分
  

  image.png
  
  由于同key值比较，也就是一些列表的for循环中需要加入key唯一键的原因，如果不加入key值，那么在更新DOM树的时候，它就不能根据你的需求去比较，这也就会导致最后多出个节点出来。

• 2、同key值比较
  

  image.png

diff算法的特性
当最外层的根节点发生改变，那么diff算法默认内部发生了翻天覆地的变化，因此，diff算法更新节点的发生是采用react的策略：删除旧的节点，再去创建一个新的节点。
如：
旧的虚拟DOM：

{
    tag:'div',
    attrs:{
      // 表示该节点的属性
       id:'app'
    },
    children:[
      {
        tag:'h1',
        text:'dom元素'
      }
    ]
}

新的虚拟DOM：

{
    tag:'p',
    attrs:{
      // 表示该节点的属性
       id:'app'
    },
    children:[
      {
        tag:'h1',
        text:'dom元素'
      }
    ]
}

尽管内部的数据还是一样的，但是此时diff并不会去进行差异性比较，而是将旧的div节点直接删除，直接新建一个p节点。
证明理由：
在Vue的transition过渡动画中，会出现这种情况，当是复用的组件使用过渡动画时，是不会产生过渡效果的，而不同的组件使用动画时，是能使用过渡效果的，产生这种问题的原因就是上述所说的，当组件复用时，没有创建销毁的过程，只是根据diff去进行差异性比较。