Vue列表渲染v-for中index作为key的问题
如下图:
若用Index作为key,当数据更新时,虚拟DOM重新进行对比(diff):
首先,key为0时,文本节点出现不一致,所以要生成一个新的真实DOM
其次,对比input节点,因为虚拟DOM没有value属性,所以input节点是一样的,直接复用
以此类推,就会出现节点错位问题
且因为Key的变化,导致所有的文本节点都要重新渲染
如下图:
若用Index作为key,当数据更新时,虚拟DOM重新进行对比(diff):
首先,key为0时,文本节点出现不一致,所以要生成一个新的真实DOM
其次,对比input节点,因为虚拟DOM没有value属性,所以input节点是一样的,直接复用
以此类推,就会出现节点错位问题
且因为Key的变化,导致所有的文本节点都要重新渲染