将真实dom数据结构通过js对象以树状图形式模拟出来。
如何将vnode(左边)变成真实的DOM元素(右边)
实现方法如下:
function createElement(vnode){ var tag = vnode.tag var attrs = vnode.attrs || {} var children = vnode.children || [] if(!tag){ return null } var elem = document.createElement(tag) var attrName for(attrName in attrs){ if(attrs.hasOwnProperty(attrName)){ elem.setAttribute(attrName, attrs[attrName]) } } children.forEach(function(childVnode){ elem.appendChild(createElement(childVnode)) }) return elem }
2、patch(vnode, newVnode)
container里面已经有了内容,更新时做对比的过程该如何实现。
实现如下:
function updateChildren(vnode, newVnode){ var children = vnode.children || [] var newChildren = newVnode.children || [] children.forEach(function(child, index){ var newChild = newChildren[index] if(newChild == null){ return } if(child.tag === newChild.tag){ updateChildren(child, newChild) } else { replaceNode(child, newChild) } }) } function replaceNode(vnode, newVnode){ var elem = vnode.elem var newElem = createElement(newVnode) return elem }
渲染真实dom会耗费巨大性能,有可能某个小节点的改变需要对整个页面进行重绘。这时就需要只更新这一小块dom而不更新整个页面。
首先会将真实dom生成virtual dom,当model发生变化时,会生成新的vnode,将vnode与旧vnode对比,发现不一样的地方更新在view上,将旧vnode更新为新vnode。
key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。
没有key的话,可以对节点进行服用,性能更高
有key的话,diff算法更准确,比如表单输入的列表渲染
3、diff算法
首先diff只会比较同层节点,不能跨层。
1、如果都有文本节点且不相同,则将真实dom(el)的文本节点设置为vnode的文本节点
2、如果旧vnode有子节点新vnode没有,则将el的子节点删除
3、如果旧vnode没有子节点新vnode有,则el添加子节点
4、如果两者都有子节点,则执行updateChildren函数比较子节点