【vue】虚拟dom的原理是什么 手写实现虚拟dom !_vue如何操作虚拟dom原理

---

2.手写实现虚拟dom(VirtualNode)

以下是使用 JavaScript 创建和操作虚拟 DOM 的简化版本例子：

// 创建虚拟 DOM 对象
function createElement(tag, props, children) {
  return {
    tag,
    props,
    children
  }
}


// 渲染虚拟 DOM 到真实环境
function render(vnode, container) {
    var el;
  
    // 创建节点
    // 针对文本节点进行特殊处理
    if (typeof vnode === 'string' || typeof vnode === 'number') {
        el = document.createTextNode(vnode);
    }
    else {
        el = document.createElement(vnode.tag);
      
        // 设置 DOM 属性
        for (var key in vnode.props) {
            el.setAttribute(key, vnode.props[key]);
        }
  
        // 如果有子节点，递归调用 render 函数
        if (vnode.children) {
            vnode.children.forEach(child => {
                render(child, el); // 注意这里使用 el 作为容器
            });
        }
    }
    
    // 将生成的真实 DOM 挂载到 container 上
    container.appendChild(el);
}

// 创建虚拟 DOM
const vnode = createElement('div', { id: 'app' }, [createElement('div', {}, ['Hello, Virtual DOM'])]);

// 渲染到真实 DOM
render(vnode, document.body);

小结：

以上代码主要展示了如何创建虚拟 DOM 对象，并实现虚拟 DOM 到真实 DOM 的渲染。在真实的 Vue.js 中，虚拟 DOM 的实现会更加复杂，包括 Diff 算法、批量异步更新等优化措施。

---

在上面的基础上，让我们更深入理解 Virtual DOM (虚拟 DOM) 的 diff 算法和 patch 过程。

这两个环节主要做的是比较新老虚拟 DOM 的差异，并找出最少的修改，应用这些修改到真实 DOM 上，以提高应用的性能。

还是用示例来解释：（ps:我的思路记录在了代码中的注释上）

// 更新函数，用于比较新旧虚拟节点（vnode）的差异，并将差异应用到实际的 DOM 元素上。
function updateElement(vnode, oldVnode) {

    // 如果旧节点和新节点相同，那么什么都不做。
    if (vnode === oldVnode) return;

    // 如果有新的文本内容，那么更新文本内容。
    if (vnode.text) {
        oldVnode.text = vnode.text;


### 总结

* 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

* 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

* 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

* 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/6c250b6200355d0edce85b970db267bd.png)

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！