Vue/React的Diff算法如何实现快速geng新虚拟DOM？

你懂的，前端开发中，尤其是在大型应用中，性Neng就是王道。每次数据变了直接geng新真实 DOM 就像给页面贴新标签，效率太低了。所以框架们就得想办法优化。而 Diff 算法就是其中一把利器。

虚拟DOM 是什么？

const vNode = {
    tag: 'div',
    props: { id: 'app' },
    children:  }
    ]
};

简单来说虚拟 DOM 就是 JavaScript 对象的一个轻量级版本，它模拟了真实 DOM 的结构。当你修改数据后框架先用新的虚拟 DOM 来渲染页面然后跟旧的虚拟 DOM 进行比较，找出哪些部分需要geng新。这就像给真实 DOM Zuo了一次“差分”，只改需要改的部分。

Diff 算法的核心思想是：对比两个虚拟 DOM 树，找出差异点，然后只把这些差异点应用到真实 DOM 上。这样Ke以避免一次性geng新整个页面大大提升渲染效率。

构建 Patch： 将两棵树进行比较，生成一个补丁对象 。这个对象包含了需要修改的地方。

应用 Patch： 将补丁对象应用到真实的 DOM 上。

在 Vue 中，“key”属性扮演着至关重要的角色。Ru果你在循环渲染列表时给每个子元素设置了 `key` 属性，那么 Diff 算法就Ke以利用 `key` 来判断元素是否被移动、删除或添加了。

  
Item 1
  
Item 2
  
Item 3

假设 Item 2 被移动到了列表的中间位置。Ru果没有 `key` 属性，Diff 算法会认为 Item 2 完全被替换了。但是有了 `key` ，Diff 就知道 Item 2 的位置发生了变化，只需要调整它的位置即可。

function diff {
    if  { return { type: 'REPLACE', node: newVNode }; } // 不同标签直接替换
    // ... 其他对比逻辑  ...
}

对于 props 的比对也hen简单：遍历新节点的 props 对象，kankan有哪些属性发生了改变或新增了。