vue-vue2和vue3的diff算法

核心要点

• 数据变化时，vue如何更新节点
• 虚拟DOM 和 真实DOM 的区别
• vue2 diff 算法
• vue3 diff 算法

一、 数据变化时，vue如何更新节点

首先渲染真实DOM的开销是很大，比如有时候我们修改了某个数据且修改的数据量很大时，此时会频繁的操作真实dom，会不断的引起整个dom树的重绘和重排；vue是根据真实DOM生成一颗 虚拟DOM，当 虚拟DOM 某个节点的数据改变后会生成一个新的newVnode，然后newVnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上

二、虚拟DOM 和 真实DOM 的区别

虚拟DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构；

//真实DOM
<div>
    <p>123</p>
</div>

//虚拟DOM
var Vnode = {
   
    tag: 'div',
    children: [
        {
    tag: 'p', text: '123' }
    ]
};

三、vue2 diff 算法

核心原理

• 深度优先，同层比较，时间复杂度只有 O(n)；
• 双针比较，新头与旧头比较，新尾与旧尾比较，旧头与新尾比较，新头与旧尾比较

diff算法流程

（1）diff算法是发生在更新的过程，而更新的情况有以下几种情况

• 老的是Text，新的是Text，直接更新
• 老的是Array，新的是Text，把旧的全部删掉，更新为Text
• 老的是Text，新的是Array，删掉旧的文本，更新为新的Ar