当前位置：首页 > VUE

vue实现虚拟dom

2026-02-17 04:33:34VUE

Vue 虚拟 DOM 的实现原理

Vue 的虚拟 DOM（Virtual DOM）是一种内存中的轻量级 JavaScript 对象，用于描述真实 DOM 的结构和属性。通过对比新旧虚拟 DOM 的差异，Vue 可以高效地更新真实 DOM。

虚拟 DOM 的核心概念

虚拟 DOM 是一个 JavaScript 对象树，每个节点对应真实 DOM 的一个元素。Vue 通过以下步骤实现虚拟 DOM：

创建虚拟节点（VNode）
Vue 使用 createElement 函数（通常缩写为 h）创建虚拟节点。每个 VNode 包含标签名、属性、子节点等信息。
```
const vnode = h('div', { id: 'app' }, [
  h('p', { class: 'text' }, 'Hello World')
]);
```
渲染虚拟 DOM 到真实 DOM
通过 patch 函数将虚拟 DOM 转换为真实 DOM。如果是首次渲染，直接创建新 DOM；如果是更新，则对比新旧 VNode。
```
// 首次渲染
patch(container, vnode);

// 更新渲染
patch(oldVnode, newVnode);
```
Diff 算法优化更新
Vue 通过 Diff 算法比较新旧 VNode 的差异，仅更新必要的 DOM 节点。Diff 算法遵循以下规则：
- 同层级比较，不跨层级。
- 通过 key 属性识别可复用的节点。
- 优先比较标签名和 key，相同则复用节点。

虚拟 DOM 的优势

性能优化
减少直接操作真实 DOM 的次数，通过批量更新提高性能。
跨平台能力
虚拟 DOM 是 JavaScript 对象，可以渲染到不同平台（如 Web、Native、SSR）。
简化开发
开发者只需关注数据变化，Vue 自动处理 DOM 更新。

实现虚拟 DOM 的示例代码

以下是一个简化的虚拟 DOM 实现示例：

// 创建虚拟节点
function createElement(tag, props, children) {
  return {
    tag,
    props,
    children
  };
}

// 渲染虚拟节点到真实 DOM
function render(vnode) {
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }

  const el = document.createElement(vnode.tag);
  for (const key in vnode.props) {
    el.setAttribute(key, vnode.props[key]);
  }

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

  return el;
}

// Diff 算法简化实现
function patch(oldVnode, newVnode) {
  if (oldVnode.tag !== newVnode.tag) {
    return render(newVnode);
  }

  const el = oldVnode.el;
  for (const key in newVnode.props) {
    if (newVnode.props[key] !== oldVnode.props[key]) {
      el.setAttribute(key, newVnode.props[key]);
    }
  }

  // 递归更新子节点
  // ...
}