虚拟DOM转换为真实DOM 初始化与更新时的转换原理

最新推荐文章于 2024-09-10 10:36:17 发布

造梦者FZ

最新推荐文章于 2024-09-10 10:36:17 发布

阅读量325

点赞数

分类专栏：前端面试题 vue 文章标签： javascript 前端 html html5

本文链接：https://blog.csdn.net/qq_43923146/article/details/125938606

版权

vue 同时被 2 个专栏收录

80 篇文章 5 订阅

订阅专栏

前端面试题

7 篇文章 0 订阅

订阅专栏

本文详细阐述了虚拟DOM在转换为真实DOM时的初始化和更新流程，包括创建元素、属性设置及子元素插入。首先介绍了如何根据虚拟DOM生成目标元素及其属性，然后讲解了如何递归处理子元素的添加。重点在于理解虚拟DOM优化的效率提升原理。

摘要由CSDN通过智能技术生成

虚拟DOM转换为真实DOM 初始化与更新时的转换原理

// 虚拟dom转化为真实dom初始化加载原理（大致流程）
// 虚拟dom 生成的三要素 目标元素、目标元素属性、目标元素子元素
function createrElement(vonde){
    let tag = vonde.tag //目标元素
    let attrs = vonde.attrs//目标元素属性
    let children = vonde.children //标元素子元素
    if(!tag){ // 如果没有目标元素什么操作都不做
        return null
    }
    let elem=document.createElement(tag)
    let attrName
    // 给dom 添加属性
    for(attrName in attrs){
        if(attrs.hasOwnproperty(attrName)){//判断如果有属性则给目标元素添加
            elem.setAttribute(attrName,attrs[attrName])
        }
    }
    //将子元素添加到目标之上
    children.forEach(childVnode => {
        elem.appendChild(createrElement(childVnode))
    });
    return elem
}


// 虚拟dom转化为真实dom更新加载原理（大致流程）
function updateChildren(vnode,newVnode){
 let children = vnode.children || [] //现有节点
 let newChildren = newVnode.children || [] //新节点
 children.forEach((childrenVnode,index)=>{
    // 循环每一项
    let newChildrenVnode = newChildren[index] //通过index将新老节点进行对照
    if(newChildrenVnode.tag===newChildren.tag){
        updateChildren(childrenVnode,newChildrenVnode)//如果第一层没有变化再次递归对照
    }else{
        replaceNode(childrenVnode,newChildrenVnode)
    }
 })
}