本节示例代码将分多种情况
示例一
定位断点
定位到demo组件的patchVnode过程
分析
接受参数oldVnode和vnode，分别是两次的ul元素，其children即需要diff对比更新的两次li元素
我们分别查看两个数组中的第二个li如下,可以看到一个是9一个是2
进入updateChildren，将10个li元素传入
分别定义新旧节点的头尾指针，默认头指针指向新旧节点的第一个li，尾指针指向最后一个
通过sameVnode函数判断指针对应的节点是否是同一个节点，遵循先头后尾原则，故先比较头指针对应的头节点，这将进入新一轮的patchVnode，其实也就是拿到我们刚刚打印的值作处理。显然，它们是同一节点，且没有更多的子节点了，故继续向下，将跳出本轮比较，回到li的比对过程，继续向下
因此，对于同一节点，不做处理
将新旧头指针后移一位重复调用patchVnode，且此时的头尾指针如下
此时新旧节点不同进入该判断，执行nodeOps.setTextContent
这实际上就是做了一次替换，执行过后，第二个旧的li--2将被新的li--9所替换，页面如下
结束本轮，将新旧头指针后移一位，此时的头尾指针如下
由于仍然是不同的节点，故同上，执行后页面如下
依次类推，最终页面如下
(
结论：对于同一节点类型，仅比较其值，同则保留，不同则替换
示例二
分析
首次的首尾指针如下
根据上一个示例的结论，像这样节点类型及值相同的，将被保留，此时页面不变，如下
结束本轮，将新旧头指针后移一位，此时的头尾指针如下
显然两次的首尾指针对应的元素类型不同：首不同、尾不同、新首不同旧尾、新尾不同旧首，进入else逻辑
对于当前而言，创建一个新的元素插入到首指针对应位置，此时页面如下
结束本轮，本次只移动了新节点的头指针，并执行了插入操作，旧节点指针不变，此时的头尾指针如下
（结论：各点均不同时，插入新节点，移动新节点头指针）
同上，循环几次后页面如下
代码向下，则删除旧节点
此时页面如下
（结论：节点类型不同时，则先依次添加新节点，再统一执行旧节点删除）
示例三
分析
首尾指针如下
由于span和div类型不同，故判定尾指针，发现相同，进入patchVnode，和示例一一样，进行值更新，但本质上还是复用节点
接着变更指针，注意本次是改变的尾指针
变更后的首尾指针如下
发现又是可复用的节点，则又跟示例一处理一致
继续变更尾指针，如下
发现又是可复用的节点，则又跟示例一处理一致
继续变更尾指针，如下
此时元素类型不一致，故将和示例二处理一致，即先插入新的，后删除旧的
（结论：先头后尾，先从头向尾，当在头部受阻<未找到可复用节点>时，将会转而从尾向前）
示例四
分析
首尾指针如下
由于使用了v-if的标签虽然视觉上不显示，但是会被vue渲染成一个占位vnode，即两个text为空的值
显然，首的占位节点必定不等，故新旧的指针均不等，则进行交叉对比
从patchVnode可知，其和示例一是一样的，这将会复用节点本身并根据新节点的值比对更新旧节点，并在更新后把新的节点removeVnodes掉
从canMode和insertBefore可知，将会把旧节点移动到新的节点位置
结论如下：所谓的diff实际上就是一一比对的过程，该比对的是节点类型而非节点值。它使用两个指针分别在对应的条件下进行变更移动，遵循先头后尾的原则，只有当头指针不相同时才会启用尾指针向前对比。若真正对应位置均不一一相等的情况下，则会进行交叉比对，在该过程中，发现可复用的节点时，进行移位处理
