【Vue2.x 源码学习】第三十二篇 - diff 算法 - 乱序比对

let render1 = compileToFunction(`<div>    <li key="A">A</li>    <li key="B">B</li>    <li key="C">C</li>    <li key="D">D</li></div>`);
let render2 = compileToFunction(`<div>    <li key="F" style="color:pink">F</li>    <li key="B" style="color:yellow">B</li>    <li key="A" style="color:blue">A</li>    <li key="E" style="color:red">E</li>    <li key="P" style="color:red">P</li></div>`);

// src/vdom/patch.js#updateChildren#makeKeyByIndex
function updateChildren(el, oldChildren, newChildren) {  // ...    /**   * 根据children创建映射   */  function makeKeyByIndex(children) {     let map = {}     children.forEach((item, index)=>{       map[item.key] = index;     })     console.log(map)     debugger;     return map  }
  let mapping = makeKeyByIndex(oldChildren);    // ...}

while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {  // 当前循环开始时，先处理当前的oldStartVnode和oldEndVnode为空的情况；   // 原因：节点之前被移走时置空，直接跳过  if(!oldStartVnode){    oldStartVnode = oldChildren[++oldStartIndex];  }else if(oldEndVnode){    oldEndVnode = oldChildren[--oldEndIndex];  } else if (isSameVnode(oldStartVnode, newStartVnode)) {// 头头比较    // ...  }else if(isSameVnode(oldEndVnode, newEndVnode)){// 尾尾比较    // ...  }else if(isSameVnode(oldStartVnode, newEndVnode)){// 头尾比较    // ...  }else if(isSameVnode(oldEndVnode, newStartVnode)){// 尾头比较    // ...  }else{    // 前面4种逻辑（头头、尾尾、头尾、尾头）,主要是考虑到用户使用时的一些特殊场景，但也有非特殊情况，如：乱序排序    // 筛查当前新的头指针对应的节点在mapping中是否存在    let moveIndex = mapping[newStartVnode.key]    if(moveIndex == undefined){// 没有，将当前比对的新节点插入到老的头指针对用的节点前面      // 将当前新的虚拟节点创建为真实节点，插入到老的开始节点前面      el.insertBefore(createElm(newStartVnode), oldStartVnod e.el);    }else{  // 有,需要复用      // 将当前比对的老节点移动到老的头指针前面      let moveVnode = oldChildren[moveIndex];// 从老的队列中找到可以被复用的这个节点      el.insertBefore(moveVnode.el, oldStartVnode.el);      // 复用：位置移动完成后，还要对比并更新属性      patch(moveVnode, oldStartVnode)      // 由于复用的节点在oldChildren中被移走了,之前的位置要标记为空(指针移动时，跳过会使用)      oldChildren[moveIndex] = undefined;    }    // 每次处理完成后，新节点的头指针都需要向后移动    // 备注：    //     无论节点是否可复用，新指针都会向后移动，所以最后统一处理；    //    节点可复用时，老节点的指针移动会在4种特殊情况中被处理完成；    newStartVnode = newChildren[++newStartIndex];  }}

// 2，旧的多，（以旧指针为参照）删除多余的真实节点if(oldStartIndex <= oldEndIndex){  for(let i = oldStartIndex; i <= oldEndIndex; i++){    let child = oldChildren[i];    // child有值时才删除；原因：节点有可能在移走时被置为undefined    child && el.removeChild(child.el);  }}