## patch - 目的是修改dom 节点 1. 通过模版编译生成 vnode 树 2. 当数据改变时，会生成新的 vnode 树 3. 新的 vnode 和旧的 vnode 进行对比 - **diff 的过程** 4. **一边对比，一边通过patch函数对真实dom进行打补丁** ## vue 优化的 Diff 算法 * 只比较同一层级的 vnode * 根据 tag 和 key 判断是否为同一元素，不是时直接删除旧的节点，创建新的节点 * 判断为同一元素时，在进行patchVnode ## vue Diff 算法的实现 有四种可能性 1. 都为空 - 不处理，直接return 2. oldVnode 为空， vnode 不为空 - 创建新节点 createElement 3. oldVnode 不为空， vnode 为空 - 删除旧节点 4. **都不为空**  ## updateChildren 更新子节点 while循环判断以下4种常见情况，如果以下4种情况还是没有找到相同的节点，就是用for循环查找 1. 新前，旧前 -- 只移动指针就可以 2. 新后，旧后 -- 只移动指针就可以 3. 新后，旧前 -- 指针和元素都要移动，元素要移动到“旧后“ 指针后面 4. 新前，旧后 -- 指针和元素都要移动，元素要移动到“旧前“ 指针前面 for 循环查找之后，新前指针后移，旧指针不需要移动，元素移动到旧前的前面