Open Qymh opened 5 years ago
如果在末尾添加元素,前面三个双端比较后,退出了循环,此时oldStartIdx为3,oldEndIdx为2,prevChildren中不存在索引为3的子节点,所以此时oldStartVNode为undefined,也不存在el属性,所以这个时候应该去抓old节点的最后一项oldEndVNode,将新增元素添加到oldEndVNode.el.nextSibling前面
prevChildren
oldStartVNode
undefined
el
oldEndVNode
oldEndVNode.el.nextSibling
const preT = h('div', '', [ h('div', { key: 'a' }, 'a'), h('div', { key: 'b' }, 'b'), h('div', { key: 'c' }, 'c') ]); const curT = h('div', '', [ h('div', { key: 'a' }, 'a'), h('div', { key: 'b' }, 'b'), h('div', { key: 'c' }, 'c'), h('div', { key: 'd' }, 'd') ]); render(preT, document.getElementById('app')); setTimeout(() => { render(curT, document.getElementById('app')); }, 1000);
如果在末尾添加元素,前面三个双端比较后,退出了循环,此时oldStartIdx为3,oldEndIdx为2,
prevChildren
中不存在索引为3的子节点,所以此时oldStartVNode
为undefined
,也不存在el
属性,所以这个时候应该去抓old节点的最后一项oldEndVNode
,将新增元素添加到oldEndVNode.el.nextSibling
前面