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(){
//......
}
网友评论