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

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}

// 渲染虚拟 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;
}

// 更新节点属性
// el 是新旧节点共享的真实DOM元素
var el = oldVnode.el = vnode.el;

// oldProps 是旧虚拟节点的属性集合
var oldProps = oldVnode.props;
// props 是新虚拟节点的属性集合
var props = vnode.props;

// 如果旧属性在新属性集合中不存在，那么在真实 DOM 上移除这个属性。
for (var key in oldProps) {
    if (!props.hasOwnProperty(key)) {
        el.removeAttribute(key);
    }
}

// 对比新旧属性集合，如果不相等，那么在真实 DOM 上更新这个属性。
for (var key in props) {
    if (props[key] !== oldProps[key]) {
        el.setAttribute(key, props[key]);
    }
}

// 比较和更新子节点，此处简化为重新渲染所有子节点
// oldChildren 是旧虚拟节点的子节点集合
var oldChildren = oldVnode.children || [];

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】