加上key

key是给每一个vnode的唯一id也是diff的一种优化策略可以根据key更准确

如果不用keyVue会采用就地复地原则最小化element的移动并且会尝试尽最大程度在同适当的地方对相同类型的element做patch或者reuse。

如果使用了keyVue会根据keys的顺序记录element曾经拥有了key的element如果不再出现的话会被直接remove或者destoryed

用new

当拥有新值的rerender作为key时拥有了新key的Comp出现了那么旧key

Comp会被移除新key

src../../dist/vue.js/scriptscript//

创建实例const

比较AA相同类型的节点进行patch但数据相同不发生dom操作比较BB相同类型的节点进行patch但数据相同不发生dom操作比较CF相同类型的节点进行patch数据不同发生dom操作比较DC相同类型的节点进行patch数据不同发生dom操作比较ED相同类型的节点进行patch数据不同发生dom操作循环结束将E插入到DOM中

比较AA相同类型的节点进行patch但数据相同不发生dom操作比较BB相同类型的节点进行patch但数据相同不发生dom操作比较CF不相同类型的节点比较E、E相同类型的节点进行patch但数据相同不发生dom操作比较D、D相同类型的节点进行patch但数据相同不发生dom操作比较C、C相同类型的节点进行patch但数据相同不发生dom操作循环结束将F插入到C之前

通过上面两个小例子可见设置key能够大大减少对页面的DOM操作提高了diff效率

设置key值一定能提高diff效率吗

正在更新已渲染过的元素列表时它默认用“就地复用”策略。

如果数据项的顺序被改变Vue

将不会移动

而是简单复用此处每个元素并且确保它在特定索引下显示已被渲染过的每个元素

DOM

这里判断是否为同一个key首先判断的是key值是否相等如果没有设置key那么key为undefined这时候undefined是恒等于undefined

function

isUndef(b.asyncFactory.error))))

}updateChildren方法中会对新旧vnode进行diff然后将比对出的结果用来更新真实的DOM

function

oldKeyToIdx[newStartVnode.key]:

oldCh,

elementcreateElm(newStartVnode,

insertedVnodeQueue,

nodeOps.insertBefore(parentElm,

vnodeToMove.elm,

elementcreateElm(newStartVnode,

insertedVnodeQueue,