vue中的diff算法

最新推荐文章于 2025-08-26 10:53:29 发布

原创最新推荐文章于 2025-08-26 10:53:29 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一种用于更新用户界面的高效虚拟DOM差异比较算法。该算法通过对比新旧虚拟DOM树来确定最小化实际DOM操作的方式，从而提高前端应用的性能。具体包括：标签名变化时替换元素；属性变化时更新属性；子节点为字符串或数组时的不同处理策略。

function diff(n1,n2)
{
    //n1=preSubTree  n2=curSubTree
    //1.tag变化
    if(n1.tag!==n2.tag)
    {
        n1.el.replaceWith(document.createElement(n2.tag));
    }

    //2.props变化
    else
    {
        //交换新旧节点的element
        const el=(n2.el=n1.el);//el=n2.el
        const {props:newProps}=n2;
        const {props:oldProps}=n1;
        //新老节点的props数量一样的情况
        if(newProps&&oldProps)
        {
            Object.keys(newProps).forEach(key=>{
                const newValue=newProps[key];
                const oldValue=oldProps[key];
                console.log(newValue,oldValue);
                if(newValue!=oldValue)
                {
                    n1.el.setAttribute(key,newValue);
                }
            })
        }
        //新老节点的props的数量不一样
        if(oldProps)
        {
            Object.keys(oldProps).forEach(key=>{
                if(!newProps[key])
                {
                    //在老节点中删除
                    n1.el.removeAttribute(key);
                }
            })
        }
    }

    //3.children改变
    //1.newChildren-> string  (old:string   old:Array)
    //2.newChildren-> array   (old:string   old:array)
    const {children:newChildren=[]}=n2;
    const {children:oldChildren=[]}=n1;
    if(typeof newChildren=="string")
    {
        if(typeof oldChildren=="string")
        {
            if(newChildren!=oldChildren)
            {
                n2.el.textContent=oldChildren
            }
        }
        else if(Array.isArray(oldChildren))
        {
            n2.el.textContent=oldChildren
        }
    }
    else if(Array.isArray(newChildren))
    {
        if(typeof oldChildren=="string")
        {
            //清空老节点的内容
            n2.el.innerText=``;
            mountElement(n2,el);
        }
        else if(Array.isArray(oldChildren))
        {
            const length=Math.min(oldChildren.length,newChildren.length);
            for(let index=0;index<length;index++)
            {
                const newVnode=newChildren[index];
                const oldVnode=oldChildren[index];
                diff(oldVnode,newVnode);
            }
            if(newChildren.length>length)
            {
                //创建节点
                for(let index=length;index<newChildren.length;index++)
                {
                    const newVnode=newChildren[index];
                     mountElement(newVnode);
                }
            }
            if(oldChildren.length>length)
            {
                //删除节点
                for(let index=length;index<oldChildren.length;index++)
                {
                    const oldVnode=oldChildren[index];
                    oldVnode.el.parent.removeChild(oldVnode.el);
                }
            }
        }
    }
}
function mountElement(vnode,container)
{
    //vnode->tag,props,children

    //tag
    const {tag,props,children}=vnode;
    const element=(vnode.el=document.createElement(tag));

    //props
    if(props)
    {
        //一个element可能有很多的prop,需要遍历
        for(const key in props)
        {
            const value=props[key];
            element.setAttribute(key,value);
        }
    }

    //children->可以字符串和 数组类型的children
    if(typeof children ==="string")
    {
        const textNode=document.createTextNode(children);
        element.append(textNode);
    }
    //children是一个数组
    else if(Array.isArray(children))
    {
        children.forEach(vnode=>{
            //在当前的element容器中递归调用‘
            //并且挂载到当前的容器上去
            mountElement(vnode,element);
        })
    }
    container.append(element);
}
export {diff,mountElement}