登录
首页 >  文章 >  前端

虚拟DOM原理及JS实现详解

时间：2026-03-27 19:52:22 229浏览 收藏

虚拟DOM通过用轻量级JavaScript对象精准描述真实DOM结构，借助h函数创建节点、render函数批量生成真实DOM、patch函数智能比对新旧节点差异并执行最小化更新，从而在频繁UI操作中大幅降低直接操作真实DOM带来的性能开销；本文以极简可运行的JS实现，清晰拆解了从节点构建、渲染挂载到局部更新的完整链路，让抽象原理变得直观可感，是理解现代前端框架响应式核心机制的绝佳切入点。

使用JavaScript实现一个简单的虚拟DOM_javascript框架原理

虚拟DOM的核心思想是用JavaScript对象来描述真实DOM结构，通过对比新旧虚拟DOM的差异，最小化地更新真实DOM。这种方式能显著提升页面性能，尤其是在频繁操作UI的场景下。下面是一个极简的虚拟DOM实现，帮助理解其基本原理。

1. 创建虚拟节点（VNode）

每个虚拟节点代表一个真实的DOM元素。我们用一个函数来创建这些节点：

function h(tag, props, children) {
  return {
    tag,
    props,
    children: Array.isArray(children) ? children : [children]
  };
}

这个h函数接收标签名、属性对象和子元素列表，返回一个描述DOM结构的JS对象。例如：

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

2. 将虚拟DOM渲染为真实DOM

需要一个函数把虚拟节点转换成真实的DOM节点：

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

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

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

  container.appendChild(el);
}

调用render(vnode, document.body)就可以把虚拟结构插入页面。

3. 比较新旧虚拟DOM（Diff算法简化版）

当数据变化时，生成新的虚拟DOM，然后与旧的对比，找出差异进行局部更新：

function patch(oldVNode, newVNode) {
  const el = oldVNode.el;

  if (newVNode.tag !== oldVNode.tag) {
    // 标签不同，直接替换
    el.parentNode.replaceChild(createElement(newVNode), el);
  } else {
    // 相同标签，更新属性和子节点
    updateProps(el, newVNode.props, oldVNode.props);
    updateChildren(el, oldVNode.children, newVNode.children);
  }
}

function createElement(vnode) {
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }

  const el = document.createElement(vnode.tag);
  if (vnode.props) {
    Object.keys(vnode.props).forEach(key => {
      el[key] = vnode.props[key];
    });
  }

  if (vnode.children) {
    vnode.children.forEach(child => {
      el.appendChild(createElement(child));
    });
  }

  vnode.el = el; // 缓存真实DOM引用
  return el;
}

function updateProps(el, newProps = {}, oldProps = {}) {
  // 移除旧的或变更的属性
  Object.keys(oldProps).forEach(key => {
    if (!newProps[key]) {
      el[key] = '';
    }
  });

  // 添加新的属性
  Object.keys(newProps).forEach(key => {
    if (oldProps[key] !== newProps[key]) {
      el[key] = newProps[key];
    }
  });
}

function updateChildren(parent, oldChildren = [], newChildren = []) {
  const max = Math.max(oldChildren.length, newChildren.length);

  for (let i = 0; i

4. 使用示例

组合以上功能，可以构建一个简单的响应式更新流程：

// 初始虚拟DOM
let oldVNode = h('div', { id: 'counter' }, [
  h('span', {}, 'Count: 0')
]);

// 渲染到页面
render(oldVNode, document.body);

// 模拟更新
setTimeout(() => {
  const newVNode = h('div', { id: 'counter' }, [
    h('span', {}, 'Count: 1')
  ]);
  patch(oldVNode, newVNode);
  oldVNode = newVNode;
}, 1000);

基本上就这些。这个实现省略了key优化、事件处理等复杂细节，但清晰展示了虚拟DOM从创建、渲染到更新的核心流程。不复杂但容易忽略的是：保持对真实DOM的引用、递归对比子树、最小化操作真实DOM。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《虚拟DOM原理及JS实现详解》文章吧，也可关注golang学习网公众号了解相关技术文章。

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>