当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript虚拟DOM实现全攻略

JavaScript虚拟DOM实现全攻略

2025-09-26 17:44:27 0浏览收藏

想深入了解JavaScript虚拟DOM吗？本文为你提供一份完整的教程，带你从零开始构建一个简易但功能完备的虚拟DOM库。虚拟DOM的核心思想是将真实DOM的变化过程抽象为JavaScript对象的操作，通过创建虚拟节点（VNode）来描述UI结构，并将其渲染为真实的DOM。更重要的是，通过高效的diff算法，对比新旧虚拟节点树的差异，从而最小化对真实DOM的更新，显著提升页面性能。本文将详细讲解如何创建虚拟节点、如何将虚拟节点渲染成真实DOM，以及如何实现diff与patch更新机制，并提供清晰的代码示例，助你轻松掌握虚拟DOM的核心原理与实现技巧，为你的前端开发技能添砖加瓦。

先创建虚拟节点并渲染为真实DOM，再通过diff算法比对新旧虚拟节点，最小化更新真实DOM。

如何用JavaScript实现一个虚拟DOM（Virtual DOM）库？

实现一个简易的虚拟DOM库，核心是把真实DOM的变化过程抽象成JavaScript对象操作，再通过比对前后差异（diff）最小化更新真实DOM。下面是一个基础但完整的虚拟DOM库实现思路和代码示例。

创建虚拟节点（VNode）

每个虚拟节点代表一个真实的DOM元素，包含标签名、属性、子节点等信息。

function h(tag, props, children) {
  return {
    tag,
    props: props || {},
    children: children || []
  };
}

这个 h 函数用于创建虚拟节点。例如：

const vnode = h('div', { id: 'app' }, [
  h('h1', {}, ['Hello Virtual DOM']),
  h('p', {}, ['This is a paragraph.'])
]);

将虚拟节点渲染为真实DOM

需要一个函数把虚拟节点转换成真实DOM节点并插入页面。

function render(vnode, container) {
  const el = document.createElement(vnode.tag);

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

  // 处理子节点
  vnode.children.forEach(child => {
    if (typeof child === 'string') {
      el.appendChild(document.createTextNode(child));
    } else {
      render(child, el); // 递归渲染
    }
  });

  container.appendChild(el);
}

调用方式：

render(vnode, document.body);

实现diff与patch更新

当状态变化时，生成新的虚拟节点树，与旧的进行对比，只更新变化的部分。

定义 patch 函数：

function patch(oldVNode, newVNode) {
  if (oldVNode.tag !== newVNode.tag) {
    // 标签不同，直接替换整个节点
    const parent = oldVNode.el.parentNode;
    parent.replaceChild(createElement(newVNode), oldVNode.el);
  } else {
    // 相同标签，复用节点
    const el = newVNode.el = oldVNode.el;

    // 更新属性
    updateProps(el, oldVNode.props, newVNode.props);

    // 比较子节点
    patchChildren(el, oldVNode.children, newVNode.children);
  }
}

function updateProps(el, oldProps, newProps) {
  // 移除不存在的属性
  Object.keys(oldProps).forEach(key => {
    if (!newProps[key]) {
      el.removeAttribute(key);
    }
  });
  // 添加或更新属性
  Object.keys(newProps).forEach(key => {
    if (oldProps[key] !== newProps[key]) {
      el.setAttribute(key, newProps[key]);
    }
  });
}

function patchChildren(parentEl, oldChildren, newChildren) {
  const commonLength = Math.min(oldChildren.length, newChildren.length);
  
  // 更新共有的子节点
  for (let i = 0; i

使用示例

组合起来使用：

// 初始渲染
const v1 = h('div', { id: 'test' }, [h('span', {}, ['old'])]);
render(v1, document.body);
patch(v1, v1); // 首次不需diff

// 更新
const v2 = h('div', { id: 'test' }, [h('span', {}, ['new'])]);
patch(v1, v2);

这时页面上的文本会从“old”变成“new”，但 div 节点被复用，只更新 span 内容。

基本上就这些。这个简化版展示了虚拟DOM的核心思想：用JS对象描述UI，通过diff减少DOM操作。实际框架如React还会处理事件、key优化、异步调度等，但原理相通。

理论要掌握，实操不能落！以上关于《JavaScript虚拟DOM实现全攻略》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！