美文网首页
vue 虚拟dom

vue 虚拟dom

作者: 张宪宇 | 来源:发表于2022-06-03 23:09 被阅读0次

    vnode => dom虚拟 => 真是dom (vue 初始化渲染)

    # 创建节点
    function createElement(vnode){
      //目标对象 ul div
      let tag = vnode.tag;
      let attrs = vnode.attrs || {};
      let children = vnode.children || {};
    
      if(!tag) return null;
      let elem = document.createElement(tag);
      let attrName
      for(attrName in attrs){
        if(attrs.hasOwnProperty(attrName)){
          //给ele添加属性
          elem.setAttribute(attrName,attrs[attrName])
        }
      }
      //添加子元素
      children.forEach(childVnode => {
        //递归添加
        elem.appendChild(createElement(childVnode))
      });
      return elem;
    }
    

    更新节点

    function upateChildren(vnode,newVnode){
      let children = vnode.childVnode || [];
      let newChildren = newVnode.children || [];
    
      children.forEach((childVnode,index)=>{
        let newChildVnode = newChildren[index];
        if(childVnode.tag === newChildVnode.tag){
          // 深层次对比 递归
          upateChildren(childVnode,newChildVnode)
        }else{
          replaceNode(childVnode,newChildVnode)
        }
      })
    }
    
    function replaceNode(){
      //......
    }
    

    相关文章

      网友评论

          本文标题:vue 虚拟dom

          本文链接:https://www.haomeiwen.com/subject/placmrtx.html