vue3虚拟dom和diff算法实现（模仿源码）

本文链接：https://blog.csdn.net/a2274001782/article/details/135096096

手动实现 Vue 3 的虚拟 DOM 和 Diff 算法

Vue 3 引入了许多新的改进和特性，其中之一是对虚拟 DOM (Virtual DOM) 和 Diff 算法的优化。在这篇文章中，我们将通过一个简单的示例来手动实现 Vue 3 风格的虚拟 DOM 和 Diff 算法。

虚拟 DOM 的基础

虚拟 DOM 是真实 DOM 的 JavaScript 对象表示，它允许我们以一种更高效的方式来描述和更新用户界面。当数据变化时，Vue 会先在虚拟 DOM 上应用这些变化，然后使用 Diff 算法来确定如何最有效地更新真实的 DOM。

实现虚拟 DOM 节点

首先，我们需要一个函数来创建虚拟 DOM 节点。这个函数被称为 h（代表 HyperScript），它接收节点的类型（如 div、span）、属性和子节点，并返回一个虚拟节点对象。

function h(tag, props, ...children) {
    return { tag, props, children };
}

渲染虚拟 DOM

接下来，我们需要一个 render 函数将虚拟 DOM 节点渲染到真实的 DOM 上。

function render(vnode, container) {
    if (typeof vnode === 'string') {
        const textNode = document.createTextNode(vnode);
        container.appendChild(textNode);
        return;
    }

    const el = document.createElement(vnode.tag);

    if (vnode.props) {
        Object.keys(vnode.props).forEach(key => {
            el.setAttribute(key, vnode.props[key]);
        });
    }

    if (vnode.children) {
        vnode.children.forEach(child => render(child, el));
    }

    container.appendChild(el);
}

实现 Diff 算法

Diff 算法是用来比较新旧虚拟 DOM 树的差异，并更新真实 DOM 的关键部分。以下是 Diff 算法的简化实现：

function patch(oldVnode, newVnode, container) {
    // 如果节点类型不同，则替换整个节点
    if (oldVnode.tag !== newVnode.tag) {
        container.replaceChild(render(newVnode), container.firstChild);
        return;
    }

    // 更新文本节点
    if (typeof newVnode === 'string') {
        if (oldVnode !== newVnode) {
            container.textContent = newVnode;
        }
        return;
    }

    // 对子节点进行 Diff 操作
    const oldChildren = oldVnode.children || [];
    const newChildren = newVnode.children || [];
    for (let i = 0; i < newChildren.length || i < oldChildren.length; i++) {
        const oldChild = oldChildren[i];
        const newChild = newChildren[i];
        if (newChild) {
            if (oldChild) {
                patch(oldChild, newChild, container.childNodes[i]);
            } else {
                render(newChild, container);
            }
        } else if (oldChild) {
            container.removeChild(container.childNodes[i]);
        }
    }
}

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 简易虚拟 DOM 和 Diff 算法</title>
</head>
<body>
    <div id="app"></div>
    <script>
        // 创建虚拟 DOM 节点的函数
        function h(tag, props, ...children) {
            return { tag, props, children };
        }

        // 将虚拟 DOM 渲染到真实 DOM 的函数
        function render(vnode, container) {
            if (typeof vnode === 'string') {
                const textNode = document.createTextNode(vnode);
                container.appendChild(textNode);
                return;
            }

            const el = document.createElement(vnode.tag);

            if (vnode.props) {
                Object.keys(vnode.props).forEach(key => {
                    el.setAttribute(key, vnode.props[key]);
                });
            }

            if (vnode.children) {
                vnode.children.forEach(child => render(child, el));
            }

            container.appendChild(el);
        }

        // Diff 算法的简化实现
        // 更新节点的 Diff 算法实现
        function patch(oldVnode, newVnode, container) {
            // 如果旧节点和新节点相同，无需更新
            if (oldVnode === newVnode) {
                return;
            }

            // 如果新旧节点标签不同，替换整个节点
            if (oldVnode.tag !== newVnode.tag) {
                const newEl = render(newVnode);
                container.replaceChild(newEl, container.firstChild);
                return;
            }

            // 对文本节点进行特殊处理
            if (typeof newVnode === 'string') {
                if (oldVnode !== newVnode) {
                    container.textContent = newVnode;
                }
                return;
            }

            // 更新属性（简化处理）

            // 更新子节点
            const oldChildren = oldVnode.children || [];
            const newChildren = newVnode.children || [];
            
            // 遍历新的子节点
            newChildren.forEach((newChild, i) => {
                const oldChild = oldChildren[i];
                if (oldChild) {
                    patch(oldChild, newChild, container.childNodes[i]);
                } else {
                    render(newChild, container);
                }
            });

            // 移除不存在的旧子节点
            if (oldChildren.length > newChildren.length) {
                oldChildren.slice(newChildren.length).forEach((child, i) => {
                    container.removeChild(container.childNodes[newChildren.length + i]);
                });
            }
        }

        // 创建并渲染初始虚拟 DOM
        const vnode = h('div', { id: 'app' },
            h('h1', null, 'Hello, Virtual DOM'),
            h('p', null, 'This is a paragraph')
        );

        const container = document.getElementById('app');
        render(vnode, container);

        // 创建新的虚拟 DOM 用于更新
        const newVnode = h('div', { id: 'app' },
            h('h1', null, 'Hello, Updated Virtual DOM'),
            h('p', null, 'This is an updated paragraph')
        );

        // 使用 patch 函数更新组件
        setTimeout(() => {
            patch(vnode, newVnode, container);
        }, 3000);
    </script>
</body>
</html>