虚拟 DOM 的 Diff 算法：Vue/React 如何实现高效更新

为什么你的 Vue 组件在数据变化时能瞬间更新，而不需要刷新整个页面？ 这背后藏着一个精妙的算法——Diff 算法。它通过对比新旧两棵虚拟 DOM 树，找出最小的变更集，从而实现高性能的视图更新。

今天，我们不谈复杂的源码，直接用 JavaScript 手写一个极简版的 Diff 算法，带你看透前端框架的核心秘密。

1. 为什么要用虚拟 DOM？

直接操作真实 DOM 是非常昂贵的。每次修改 DOM，浏览器都要重新计算样式、布局（Reflow）和绘制（Repaint）。

虚拟 DOM (Virtual DOM)  本质上就是一个普通的 JavaScript 对象：

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

通过对比两个 JS 对象（Diff），我们可以精确知道哪些地方变了，然后只更新那些变化的 DOM 节点。

2. Diff 算法的核心策略

完全的树对比复杂度是 O(n^3)，这在大型应用中是不可接受的。Vue 和 React 都采用了以下优化策略，将复杂度降到了 O(n) ：

1. 同层比较：只比较同一层级的节点，不跨层级移动。
2. Key 的作用：给列表项加上唯一的 key，帮助算法识别节点身份，避免不必要的重排。
3. 双指针优化：在处理列表时，从头部和尾部同时向中间逼近。

3. 手写极简版 Diff 算法

我们来实现一个最基础的对比逻辑：

function diff(oldVNode, newVNode) {
    // 1. 如果标签不同，直接替换整个节点
    if (oldVNode.tag !== newVNode.tag) {
        return { type: 'REPLACE', node: newVNode };
    }

    // 2. 标签相同，对比属性
    const propsPatch = diffProps(oldVNode.props, newVNode.props);

    // 3. 递归对比子节点
    const childrenPatch = diffChildren(oldVNode.children, newVNode.children);

    return {
        type: 'UPDATE',
        props: propsPatch,
        children: childrenPatch
    };
}

属性对比

属性对比比较简单，遍历新节点的属性，看是否有变化：

function diffProps(oldProps, newProps) {
    const patches = [];
    for (let key in newProps) {
        if (newProps[key] !== oldProps[key]) {
            patches.push({ key, value: newProps[key] });
        }
    }
    return patches;
}

子节点对比

这是最复杂的部分。为了简化，我们这里采用“按索引对比”的策略：

function diffChildren(oldChildren, newChildren) {
    const patches = [];
    const len = Math.max(oldChildren.length, newChildren.length);

    for (let i = 0; i < len; i++) {
        if (i >= oldChildren.length) {
            // 新增节点
            patches.push({ type: 'ADD', index: i, node: newChildren[i] });
        } else if (i >= newChildren.length) {
            // 删除节点
            patches.push({ type: 'REMOVE', index: i });
        } else {
            // 递归对比
            patches.push(diff(oldChildren[i], newChildren[i]));
        }
    }
    return patches;
}

4. 工业界实战：Key 的重要性

在上面的简化版中，如果我们在列表头部插入一个元素，所有的后续元素都会被判定为“修改”。

加入 Key 之后：  算法会通过 key 发现，原来的节点只是位置变了，内容没变。这样就能复用 DOM 节点，极大地提升了性能。

5. 总结与面试考点

面试官常问：

1. “为什么不建议用 Index 作为 Key？” （答：当列表发生增删或排序时，Index 会变化，导致算法误判，引发不必要的重渲染。）
2. “Vue 2 和 Vue 3 的 Diff 算法有什么区别？” （答：Vue 3 引入了静态标记和最长递增子序列优化，进一步减少了比对次数。）

欢迎关注我的公众号：Lee 的成长日记 

如果你觉得这篇关于“前端底层原理”的文章对你有帮助，欢迎点赞收藏！