前言
在vue中使用v-for时,一直有几个疑问:
- v-for为什么要加key
- 为什么有时候用index作为key会出错
带着这个疑问,结合各种博客和源码,终于有了点眉目。
virtual dom
要理解diff的过程,先要对virtual dom有个了解,这里简单介绍下。
【作用】
我们都知道重绘和回流,回流会导致dom重新渲染,比较耗性能;而virtual dom就是用一个对象去代替dom对象,当有多次更新dom的动作时,不会立即更新dom,而是将变化保存到一个对象中,最终一次性将改变渲染出来。
【形式】
<div>
<p></p>
<span></span>
</div>
以上代码转换成virtual dom就是如下形式(当然省去了很多其他属性)
{
tag: 'div',
children: [
{
tag: 'p'
},
{
tag: 'span'
}
]
}
diff原理
首先当然是附上这张经典的图
图中很清楚的说明了,diff的比较过程只会在同层级比较,不会跨级比较。
整体的比较过程可以理解为一个层层递进的过程,每一级都是一个vnode数组,当比较其中一个vnode时,若children不一样,就会进入updateChildren函数(其主要入参为newChildren和oldChildren,此时newChildren和oldChildren为同级的vnode数组);然后逐一比较children里的节点,对于children的children,再循环以上步骤。
updateChildren就是diff最核心的算法,源码如下(简要了解就行):
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (isUndef(oldStartVnode)) {
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
} else if (isUndef(oldEndVnode)) {
oldEndVnode = oldCh[--oldEndIdx]
} else if (sameVnode(oldStartVnode, newStartVnode)) {
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
} else if (sameVnode(oldEndVnode, newEndVnode)) {
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
} else {
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
if (isUndef(idxInOld)) { // New element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
} else {
vnodeToMove = oldCh[idxInOld]
if (sameVnode(vnodeToMove, newStartVnode)) {
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
oldCh[idxInOld] = undefined
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
} else {
// same key but different element. treat as new element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
}
}
newStartVnode = newCh[++newStartIdx]
}
}
if (oldStartIdx > oldEndIdx) {
refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
} else if (newStartIdx > newEndIdx) {
removeVnodes(oldCh, oldStartIdx, oldEndIdx)
}
diff算法是一个交叉对比的过程,大致可以简要概括为:头头比较、尾尾比较、头尾比较、尾头比较。具体过程可以参见这边博文,里面用例子讲的很清楚。
为什么要加key
可以回头看下上面的源码,有一个sameVnode
函数,其源码可以简化为如下:
function sameVnode (a, b) {
return (
a.key === b.key && a.tag === b.tag
)
}
也就是说,判断两个节点是否为同一节点(也就是是否可复用),标准是key相同且tag相同。
以下图的改变(圆圈代表一个vnode,所有node的tag相同)为例
当不加key时,key都是undefined,默认相同,此时就会按照上一节diff算法的就地复用来进行比较:
以上,B复用A的结构,C复用B的结构,D复用C的结构,E复用D的结构,删除E;然后如果数据有变化,再更新数据说明:复用是指dom结构复用,如果数据有更新,之后会再进行数据更新
如果加上唯一识别的key
以上,B、C、D、E全部可以复用,删除A即可
从以上的对比可以看出,加上key可以最大化的利用节点,减少性能消耗
为什么不建议用index作为key
在工作中,发现很多人直接用index作为key,好像几乎没遇到过什么问题。确实,index作为key,在表现上确实几乎没有问题,但它主要有两点不足:
1)index作为key,其实就等于不加key
2)index作为key,只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出(这是vue官网的说明)
第一点
对于第一点,还是以上面的例子来说明
虽然加上了key,但key是就是当前的顺序索引值,此时sameNode(A,B)依然是为true,所以与不加key时一样,A复用B的结构并将数据更新为B。下面以一个demo来说明
<div id="demo">
<div v-for="(item,index) in list" :key="index">
<item-box :data=item></item-box>
<button @click="delClick(index)">删除</button>
</div>
</div>
Vue.component('item-box',{
template:'<span>{{data.msg}}</span>',
props: ['data'],
})
var demo = new Vue({
el: '#demo',
data() {
return {
list: [
{
msg: 'k1',
id: 1
},
{
msg: 'k2',
id: 2
},
{
msg: 'k3',
id:3
}
]
}
},
methods: {
delClick (index) {
this.list.splice(index, 1)
}
}
})
操作:删除k1
不加key,或用index作为key,变化过程是
图a图b
图c
图d
也就是
经过对比,复用1、复用2、删除3
(图b),更新1的数据
(图c),更新2的数据
(图d)将demo中的key值由
index
改为item.id
,则变化过程是
也就是
经对比,复用2,复用3,删除1
小结:从以上对比可知,用index做key,与不用key是一样的。由于把源码贴出来比较不易懂,所以只是把debugger源码的结果贴出来了,感兴趣的可以自己去debugger这个过程,理解的会更好。
第二点
第二点有两种情况,我们首先看依赖子组件状态的情况
【依赖子组件状态】
还是刚刚的例子,做一点修改
Vue.component('item-box',{
template:'<button @click="itemClick">{{status}}</button>',
props: ['data'],
data () {
return {
status: 'no'
}
},
methods: {
itemClick () {
this.status = 'yes'
}
}
})
也就是将template里面的数据由props改为data,即子组件内部的数据。
操作:点击第一个no和第二个no,然后点击第一个删除,奇怪的事出现了
- 不加key,或用index作为key,结果是
本来应该删除第一个的,好像把第三个给删了。是这样么?是的。这个过程相当于第一点里面的图b,但却少了后续数据更新的过程了。为什么不更新数据了呢?因为,数据更新这个步骤是当依赖list的数据发生变化,再根据订阅模式中添加的依赖来依次更新数据(此处可以了解下双向绑定)。可以粗暴的理解为,不依赖于list的数据,此处不关心,不会去更新,流程就停留在图b了,因此我们看到的就是错误的表现了。
- 将demo中的key值由
index
改为item.id
此时就是预期的结果啦
小结:以上就是官网里提到的,就地复用的原则不适用于依赖子组件状态的场景,以上例子中,status就是子组件的状态,与外部无关
【依赖临时dom状态】
修改刚刚的demo
<div id="demo">
<div v-for="(item,index) in list" :key="index">
<input type="text">
<button @click="delClick(index)">删除</button>
</div>
</div>
操作:在输入框中分别输入1、2、3,然后删除1
- 不加key,或用index作为key,结果是
不用多说了,一样的道理,因为这是input的临时状态,与list无关,所以停留在图b的状态就不会继续有数据更新了,我们看到的就是图b的样子了
- 将demo中的key值由
index
改为item.id
更不用多说了,这里就是对的了
总结
- diff算法默认使用“就地复用”的策略,是一个首尾交叉对比的过程。
- 用index作为key和不加key是一样的,都采用“就地复用”的策略
- “就地复用”的策略,只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。
- 将与元素唯一对应的值作为key,可以最大化利用dom节点,提升性能
参考:
https://www.zhihu.com/question/61064119/answer/183717717
https://www.jianshu.com/p/342e2d587e69
https://codepen.io/vvpvvp/pen/oZKpgE
https://www.jianshu.com/p/cd39cf4bb61d