HcySunYang / vue-design

📖 master分支:《渲染器》
http://hcysun.me/vue-design/zh/
6k stars 916 forks source link

渲染器双端比较在线代码bug #261

Open kashtian opened 5 years ago

kashtian commented 5 years ago

const idxInOld = prevChildren.findIndex( node => node.key === newStartVNode.key ) 这里应判断node是否存在,prevChildren里的元素可能被赋值为undefined。 同理移除操作那里同样需要加上限制。应改为: const idxInOld = prevChildren.findIndex( node => node && (node.key === newStartVNode.key) ) for (let i = oldStartIdx; i <= oldEndIdx; i++) { prevChildren[i] && container.removeChild(prevChildren[i].el) } 补充一个会出问题的例子: `const prevVNode = h('div', null, [ h('p', { key: 'a' }, '节点1'), h('p', { key: 'b' }, '节点2'), h('p', { key: 'c' }, '节点3'), h('p', { key: 'd' }, '节点4') ])

const nextVNode = h('div', null, [ h('p', { key: 'e' }, '节点5'), h('p', { key: 'c' }, '节点3'), h('p', { key: 'b' }, '节点2'), h('p', { key: 'f' }, '节点6') ])`