前端必备|你懂什么是虚拟DOM吗

尚未秃头的蛇叔
372 阅读6分钟

什么是虚拟DMO：

虚拟DOM是一个在JavaScript中用来表示UI的轻量级对象树，它可以被用作UI库和框架的基础。

虚拟DOM的实现基于两个原则：

1. 只有在必要的时候才更新UI（比如在响应用户事件或数据变化时）；
2. 尽量最小化更新的部分，这样可以减少性能开销。

在实现虚拟DOM时，我们需要创建一个JavaScript对象来表示整个UI树。每个对象都代表一个DOM节点，它包含一个类型（比如“div”或“span”）、一些属性（比如“class”或“id”）、子节点和事件处理程序。虚拟DOM对象通常被称为“虚拟节点”或“vnode”。

每当我们需要更新UI时，我们首先会复制一份当前的虚拟DOM树，然后在新的树中修改那些需要更新的节点。例如，如果用户输入一些文字，我们会拷贝当前树，修改包含这些文字的虚拟节点，然后用新的树来更新UI。

最后，为了将虚拟DOM树转化为实际的UI，我们需要一个称为“渲染器”的函数。渲染器会负责将虚拟DOM节点转化为实际的DOM节点，并将它们添加到页面上。当虚拟DOM树被更新时，渲染器会根据变化的部分更新实际的DOM对应节点。这样，我们就可以实现高效而灵活的UI更新。

下面是一个简单的例子，它展示了如何用JavaScript对象来表示一个带有文本的div节点:
const vnode = { 
    tag: 'div', 
    attrs: { class: 'my-class' }, 
    children: ['Hello, world!'] 
};

上面的虚拟节点对象包含了一个tag属性表示代表DOM节点的类型，一个attrs属性表示该节点的属性，和一个children属性表示该节点的子节点，现在我们需要一个函数来把这个虚拟节点对象转化为实际的DOM节点。

 function createDOMElement(vnode) {
     const el = document.createElement(vnode.tag);
     // 处理属性
     for (const [key, value] of Object.entries(vnode.attrs)) {
         el.setAttribute(key, value); 
     } 
     // 处理子节点 
     for (const child of vnode.children) { 
         if (typeof child === 'string') { 
             el.appendChild(document.createTextNode(child)); 
         } else { 
             el.appendChild(createDOMElement(child)); 
         } 
     } 
     return el; 
   }

上述函数接收一个虚拟节点对象作为参数，然后使用createElement方法创建一个对应的DOM节点，并设置其属性和子节点，最终返回这个DOM节点。注意，如果子节点是字符串，我们可以使用createTextNode将其转化为DOM节点；如果子节点还是虚拟节点，我们需要继续递归下去，将其转化为DOM节点，然后将其添加为当前节点的子节点。

接下来我们需要一个函数，它接收一个旧的虚拟DOM节点和一个新的虚拟DOM节点，然后计算出它们之间的差异，最终返回一个表示差异的对象。这个函数被称为“虚拟DOM diff算法”。

    function diff(vnode1, vnode2) {
        if (vnode1 === vnode2) {
            return \[];
        }
        if (typeof vnode1 !== typeof vnode2 || vnode1.tag !== vnode2.tag) {
            return \[vnode2];  // 这个节点需要被替换
        }
        const patch = { attrs: {}, children: \[] };
        // 处理属性
        for (const \[key, value] of Object.entries(vnode2.attrs)) {
            if (vnode1.attrs\[key] !== value) {
                patch.attrs\[key] = value;
            }
        }
        // 处理子节点
        let maxSize = Math.max(vnode1.children.length, vnode2.children.length);
        for (let i = 0; i < maxSize; i++) {
            const childPatches = diff(vnode1.children\[i], vnode2.children\[i]);
            if (childPatches.length > 0) {
                patch.children.push({ index: i, patches: childPatches });
            }
        }
        return patch;
    }

上述函数首先判断两个虚拟节点是否相等，如果是，直接返回一个空数组表示没有差异。如果虚拟节点的类型不同，或者tag属性不同，那么我们就需要用新的虚拟节点来替代旧的虚拟节点，返回一个差异数组。接着，我们会遍历两个虚拟节点的属性，找出变化的属性，并把它们保存到patch.attrs中。最后，我们会逐个比较两个虚拟节点的子节点，如果他们有变化，则继续递归，直到找到具体有变化的节点，并添加到patch.children中，返回一个差异数组。

最后一个关键函数是“虚拟DOM更新函数”。它接收两个参数，旧的虚拟DOM根节点和新的虚拟DOM根节点。它首先通过diff函数计算出两者之间的差异，然后根据差异来更新实际的DOM节点。

function updateDOM(root, newVnode) {
    const patches = diff(root, newVnode);
        applyPatches(root, patches);
}

function applyPatches(root, patches) {
    for (const \[key, value] of Object.entries(patches.attrs)) {
        root.setAttribute(key, value);
    }
    for (const { index, patches } of patches.children) {
        applyPatches(root.children\[index], patches);
    }
}

上述 updateDOM 函数中，我们先调用 diff 函数计算出差异数组 patches，然后调用 applyPatches 函数来更新空位 patches 中的所有 DOM 节点。applyPatches 函数中，我们依次处理 patches 中的每一个差异，对属性变化进行更新，然后递归处理子节点的变化。

这样，我们就成功地实现了一个简单的虚拟DOM系统。整个实现过程分为3个关键步骤：构建虚拟DOM、计算差异、应用差异。在实际的虚拟DOM系统中，还需要考虑一些性能优化问题，如何高效地计算差异和更新DOM节点等。

虚拟DOM的优势：

虚拟DOM的主要优势是能够提高Web应用的性能和用户体验。这是通过以下几个方面实现的

  1. 减少DOM操作：使用虚拟DOM可以减少实际的DOM操作次数，从而提高性能。

  2. 批量更新：虚拟DOM可以批量更新多个状态变化，然后一次性更新到真实的DOM节点上，从而避免了反复操作DOM节点。

  3. 跨平台能力：通过使用虚拟DOM，可以实现Web应用的跨平台能力，即将相同的组件代码复用在不同的Web平台上。

  4. 更好的开发体验：使用虚拟DOM可以提供更好的开发体验，将业务逻辑和UI代码分离，使得代码更易于维护和扩展。

总之，虚拟DOM可以让我们以更好的性能、更好的可读性、更好的可维护性来构建Web应用。

虚拟DMO和操作真实DMO区别

  1. 操作次数：虚拟DOM并不直接操作真实的DOM节点，而是先在内存中构建一个虚拟DOM树，当虚拟DOM发生变化时，会计算出新旧虚拟DOM树之间的差异(diff算法)，然后将差异应用到真实的DOM节点上。这种情况下，虚拟DOM的操作次数会比直接操作真实DOM的次数更少。

  2. 性能：由于DOM操作对于浏览器来说是非常昂贵的，而虚拟DOM可以减少DOM操作的次数，因此虚拟DOM的性能表现通常比直接操作真实DOM的性能要好。

  3. 可维护性：虚拟DOM提供了一种更加易于维护UI组件的方式。通过将UI组件抽象为一个虚拟DOM树，并且通过diff算法进行局部更新，我们可以更方便地组织和重用代码。

  4. 开发效率：虚拟DOM可以让我们写出更清晰，更可读的代码，从而提高开发效率和开发者的工作体验。

总结

以上浅讲述虚拟DMO的一些知识，希望对正在学习前端的你有所帮助。当然，这并不是所有的内容，后续我还会一直更新这篇文章。最后感谢大家对本文的支持～欢迎点赞收藏，在评论区留下你的高见 🌹🌹🌹

avatar
文章
阅读
粉丝