Patch

简介

patch是vnode最核心的部分，它将vnode渲染成真实的DOM。

Vue可以直接将所有vnode渲染成真实DOM，但是这样性能消耗太大，需要大量地操作DOM，而如果用JavaScript找出哪些node需要更改，哪些不用更改，然后再操作DOM的话，可以大幅度提高性能。

Patch流程

对现有的DOM修改其实就只要做三件事

• 创建新增的节点

• 删除已经废弃的节点

• 修改需要更新的节点

而对于vnode，我们需要关注三种节点类型：

• 元素节点： 特有tag属性

• 文本节点： text保存着文本内容

• 注释节点： 特有isComment属性

创建新增的节点

当遍历完oldVnode都没有找到对应的节点时，就说明此节点是新增的节点，我们需要创建真实的节点并添加到视图上。

事实上，只有三种节点才会被创建： 元素节点、文本节点和注释节点。

判断这些节点的依据是： 如果vnode有tag属性就是元素节点，就用document.createElement方法创建；如果没有就看是否有isComment属性，有且为true则表明这是一个注释节点，则用document.createComment方法创建；如果没有isComment属性，就只能是文本节点，这时候调用document.createTextNode方法创建文本节点。 添加视图只需要调用parentNode.appendChild()方法即可。

对于元素节点特别要注意children(子节点)，应当递归地创建子节点并添加到父节点上，最后将最上层的节点添加到DOM上。

删除节点

当oldVnode存在该节点，而vnode没有，则说明这是一个废弃的节点，应当删掉；或者是替换节点时删除旧节点。

删除节点非常简单，调用parent.removeChild方法即可将节点从视图中删除。

更新节点

当vnode和oldVnode节点是同一个节点时，不是暴力地用新节点覆盖旧节点，而是比对两个节点，找出不一样的地方进行更新。

在更新节点时应当注意“静态节点”，这种节点不会随状态的改变而更新，应当跳过判断以加快速度。 如 <p>我是静态节点</p>

新旧vnode比对流程

更新节点先看是否有text属性，如果text不同则修改text，然后更新子节点。

更新子节点有三种情况：

• 只有oldVnode有子节点： 清空DOM中的子节点

• 只有vnode有子节点： 进一步判断oldVnode是否有text,若无则添加子节点,若有则清空DOM的文本

• oldVnode和vnode都有子节点： 更新子节点

更新子节点

在前面的更新节点中，如果oldVnode和vnode都有children，则需要进一步的操作来更新子节点。

更新子节点的操作有四种： 创建、删除、更新、替换。

新旧两个子节点列表是通过循环进行比对的，所以创建节点的操作是在循环体内执行的，其具体实现是在oldChildren（旧子节点列表）中寻找本次循环所指向的新子节点。

创建子节点

如果在oldChildren中没有找到与本次循环所指向的新子节点相同的节点，那么说明本次循环所指向的新子节点是一个新增节点。对于新增节点，我们需要执行创建节点的操作，并将新创建的节点插入到oldChildren中所有未处理节点（未处理就是没有进行任何更新操作的节点）的前面。

删除子节点

删除子节点，本质上是删除那些oldChildren中存在但newChildren中不存在的节点。

当newChildren中的所有节点都被循环了一遍后，也就是循环结束后，如果oldChildren中还有剩余的没有被处理的节点，那么这些节点就是被废弃、需要删除的节点。

移动子节点

通过Node.insertBefore()方法，我们可以成功地将一个已有节点移动到一个指定的位置。

但怎么得知新虚拟节点的位置是哪里呢？换句话说，怎么知道应该把节点移动到哪里呢？其实得到这个位置并不难。对比两个子节点列表是通过从左到右循环newChildren这个列表，然后每循环一个节点，就去oldChildren中寻找与这个节点相同的节点进行处理。也就是说，newChildren中当前被循环到的这个节点的左边都是被处理过的。那就不难发现，这个节点的位置是所有未处理节点的第一个节点，所以，只要把需要移动的节点移动到所有未处理节点的最前面。

更新子节点

当一个节点同时存在于newChildren和oldChildren中时需要更新子节点。

如果newChildren和oldChild中有对应的节点，那么除了要进行更新操作外，还得看他们位置是否相同，如果不同还得进行移动子节点操作。

更新节点操作前面讲过了。

优化策略

针对位置不变的或者说位置可以预测的节点，我们不需要循环来查找，因为我们有一个更快捷的查找方式。它共有4种查找方式，分别是：

• 新前与旧前

• 新后与旧后

• 新后与旧前

• 新前与旧后

新前指的是newChildren第一个未处理的节点，旧后指的是oldChildren最后一个未处理的节点，其他的以此类推。

如果前面这4种方式对比之后都没找到相同的节点，这时再通过循环的方式去oldChildren中详细找一圈，看看能否找到。大部分情况下，通过前面这4种方式就可以找到相同的节点，所以节省了很多次循环操作。

新前和旧前

对比它们俩是不是同一个节点。如果是同一个节点，则说明我们不费吹灰之力就在oldChildren中找到了这个虚拟节点。

新后与旧后

当“新前”与“旧前”对比后发现不是同一个节点，这时可以尝试用“新后”与“旧后”的方式来比对它们俩是否是同一个节点。

“新后”与“旧后”的意思是使用“新后”这个节点和“旧后”这个节点对比，对比它们俩是不是同一个节点。如果是同一个节点，就将这两个节点进行对比并更新视图

新后与旧前

“新后”与“旧前”的意思是使用“新后”这个节点与“旧前”这个节点进行对比，通过对比来分辨它们俩是不是同一个节点。如果是同一个节点，就对比它们俩并更新视图

如果“新后”与“旧前”是同一个节点，那么由于它们的位置不同，所以除了更新节点外，还需要执行移动节点的操作

新前与旧后

“新前”与“旧后”的意思是使用“新前”与“旧后”这两个节点进行对比，对比它们是否是同一个节点，如果是同一个节点，则进行更新节点的操作

由于“新前”与“旧后”这两个节点的位置不同，所以除了更新节点的操作外，还需要进行移动节点的操作

哪些是未处理的节点

你可能会发现，所有的对比都是针对未处理的节点的，已处理过的节点忽略不计。那么，怎么分辨哪些节点是处理过的，哪些节点是未处理过的呢？

正常来说，我们可以循环newChildren，每次循环都去oldChildren循环找对应的节点，但是因为前面的优化策略可能会使节点在后面进行比对，因此正确的做法是从两边向中间循环。

那么，怎样实现从两边向中间循环呢？首先，我们先准备4个变量：oldStartIdx、oldEndIdx、newStartIdx和newEndIdx。这4个变量分别表示oldChildren的开始位置的下标（oldStartIdx）和结束位置的下标（oldEndIdx），以及newChildren的开始位置的下标（newStartIdx）和结束位置的下标（newEndIdx）。在循环体内，每处理一个节点，就将下标向指定的方向移动一个位置，通常情况下是对新旧两个节点进行更新操作，就相当于一次性处理两个节点，将新旧两个节点的下标都向指定方向移动一个位置。

更新子节点总体流程