vue的渲染有两条线
1.初始化 patch(container,vnode)
2.更新 update(vnode,newVnode)
function createElement(vnode) {
let target = vnode.tag;
let attrs = vnode.attrs || {};
let children = vnode.children || [];
if (!target) {
return;
}
let ele = document.createElement(target);
let attrName = Object.keys(attrs);
for (let i = 0; i < attrName.length; i++) {
let attr = attrName[i];
ele.setAttribute(attr, attrs[attr]);
}
for (let i = 0; i < children.length; i++) {
let child = children[i];
ele.appendChild(createElement(child));
}
return ele;
}
function updateChildren(vnode, newVnode) {
let children = vnode.children || [];
let newChildren = newVnode.children || [];
children.forEach((childrenVnode, index) => {
let newChildrenvnode = newChildren[index];
updateElement(childrenVnode, newChildrenvnode);
});
}
function updateElement(vnode, newVnode) {
if (!newVnode) return;
if (!vnode) return;
if (newVnode.tag !== vnode.tag) {
replaceChildren(childrenVnode, newChildrenvnode);
}
updateChildren(childrenVnode, newChildrenvnode);
}