说一说 Vue 列表为什么加 key?

155 阅读2分钟

1.key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速 2. 不然Vue会存在“就地复用问题”,(下一个元素复用了上一个在当前位置元素的状态) 3.如果在一个v-for list里面,删除中间的一个item,这个时候这个item后面所有的index都会变化,那么diff就会计算出后面的item的key-index映射都发生了变化,就会全部重新渲染,大大影响了性能。 diff算***比较新旧节点,比如有很多的li元素,当有一个新的插入时候,没有key的话,就会把所有的元素重新渲染一遍,有key的话。就会按找key一一对比,新建li元素,插入到指定位置即可,不能用index作为key ,否则插入的时候还是会重心渲染所有的li元素

key是vue中vnode的唯一标记,通过这个key,我们的diff操作可以更准确、更快速,不然vue会存在就地复用问题,如果一个v-forlist里面,删除中间一个item,这时候这个item后面所有的index都会变化, 那么diff就会计算出后面的item的key-index映射发生了变化,就会全部重新渲染,大大影响了性能。 diff算比较新旧节点,比如有很多的li元素,当有一个新的插入时候,没有key的话,就会把所有的元素重新渲染一遍,有key的话。就会按找key一一对比,新建li元素,插入到指定位置即可,不能用index作为key,否则插入的时候还是会重新渲染所有 的li元素插入到指定位置即可,不能用index作为key,否则插入的时候还是会重新渲染所有的li元素