Vue虚拟dom的优化

• 虚拟节点vnode包含以下属性

{
	tag:'div' //标签名
	data:{...} // 属性数据 attrs、props、event、style、class
	children:[...]  // 子节点数据，vnode结构
	text: undefined  // 文本
	elm: undefined  // 真实dom
	key: undefined  //   节点标识
	
}

Vue的优化策略
尝试几种可能的变化，快速查找差异，减少不必要的循环

…前：子节点列表中所有未处理的第一个节点
…后：子节点列表中所有未处理的最后一个节点

• 新前与旧前

如果相同：直接更新操作，将新旧start位置下标后移，进入下一个循环
如果不同：执行新后与旧后的对比操作

• 新后与旧后

• 如果相同：直接更新操作，将新旧end位置下标前移，进入下一个循环
• 如果不同：执行新后与旧前的对比

• 新后与旧前

• 如果相同：直接更新操作，并将旧前对应的dom移至所有未处理的节点最后，将新后位置下标向前移动一个位置，旧前位置下标向后移动一个位置
• 如果不同，执行新前与旧后对比

• 新前与旧后

• 如果相同：直接更新操作，并将旧后对应的dom移至所有未处理的节点最前面，将新前位置下标向后移动一个位置，旧后位置下标向前移动一个位置
• 如果不同，执行key比较
  

循环对比都是针对未处理的节点

 // while条件 确保每个节点都是未处理的
 
while(oldStartIdx <= oldChildren && newStartIdx <= newEndIdx){
    //...
}

只要oldChildren或者newChildren中的一个循环完毕，循环就结束

• 如果oldChildren先循环结束，那么newChildren中还剩的节点都是需要新增的节点，直接插入DOM就行。
• 如果newChildren先循环结束，那么oldChildren中还剩的节点都是需要删除的节点，直接从DOM中移除。