HcySunYang / vue-design

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

fix: 添加新元素漏掉了从末尾添加的情况 #254

Open Qymh opened 5 years ago

Qymh commented 5 years ago

如果在末尾添加元素,前面三个双端比较后,退出了循环,此时oldStartIdx为3,oldEndIdx为2,prevChildren中不存在索引为3的子节点,所以此时oldStartVNodeundefined,也不存在el属性,所以这个时候应该去抓old节点的最后一项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);