vue的diff算法详解（看完谁问都不慌了）

Vue的diff算法是一种用来比较新旧虚拟DOM树差异的算法，其目的是为了高效更新DOM。diff算法的过程主要分为三个阶段：

1. 遍历：递归比较两棵虚拟DOM树的每一个节点，并对不同的节点进行标记。
2. 建立：将标记的节点添加到一个需要更新的列表中。
3. 应用：根据列表应用更新到真实的DOM上。

具体步骤如下：

1. 新旧节点是相同的，直接复用。
2. 新节点不存在，标记旧节点为移除。
3. 新节点与旧节点不同，标记旧节点为移除，并添加新节点。
4. 如果新节点是一个可复用组件，并且和旧节点相同，则尝试复用。

这个过程是高效的，因为它会尽可能地复用老的DOM元素。

以下是一个简化的例子，说明diff算法的核心概念：

function diff(oldTree, newTree) {
  let patches = {};
 
  diffRecursive(oldTree, newTree, patches, 0);
 
  return patches;
}
 
function diffRecursive(oldNode, newNode, patches, index) {
  // 新旧节点不同
  if (oldNode.type !== newNode.type) {
    // 标记旧节点为移除
    patches[index] = { type: 'REMOVE', index };
    // 如果新节点存在，标记新节点为添加
    if (newNode) {
      patches[index] = { type: 'ADD', index, newNode };
    }
  } else if (oldNode.props !== newNode.props || oldNode.children !== newNode.children) {
    // 属性或子节点有变化
    patches[index] = { type: 'PROPS', index, props: newNode.props };
  }
 
  // 比较子节点
  let childPatches = {};
  diffChildren(oldNode.children, newNode.children, childPatches, index);
  if (Object.keys(childPatches).length) {
    patches[index] = { ...patches[index], ...childPatches };
  }
}
 
function diffChildren(oldChildren, newChildren, patches, index) {
  let lastPatchIndex = index;
  newChildren.forEach((newChild, i) => {
    let oldChild = oldChildren[i];
    let newPatchIndex = lastPatchIndex + 1;
    diffRecursive(oldChild, newChild, patches, newPatchIndex);
    lastPatchIndex = newPatchIndex;
  });
 
  if (oldChildren.length > newChildren.length) {
    // 旧虚拟DOM树有多余的节点，标记为移除
    for (let i = newChildren.length; i < oldChildren.length; i++) {
      patches[lastPatchIndex + 1] = { type: 'REMOVE', index: lastPatchIndex + 1 };
    }
  }
}

在这个例子中，diff函数是入口，它比较两棵虚拟DOM树的根节点，并返回一个补丁对象patches，描述了如何更新真实的DOM。diffRecursive是递归比较两棵DOM树的主要函数，而diffChildren比较子节点的差异。这个例子提供了diff算法的基本概念，但Vue中的diff算法实现要复杂得多，包括key的处理、节点的复用等。