Vue中key的作用

Posted qinglaoshi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中key的作用相关的知识,希望对你有一定的参考价值。

key是为每个vnode指定唯一的id,在同级vnode的Diff过程中,可以根据key快速的进行对比,来判断是否为相同节点,

利用 key 的唯一性生成 map 对象来获取对应节点,比遍历方式更快,指定key后,可以保证渲染的准确性(尽可能的复用 DOM 元素。)

为什么不建议用index作为key?

用index 作为 key,和没写基本上没区别,因为不管你数组的顺序怎么颠倒,index 都是 0, 1, 2 这样排列,导致 Vue 会复用错误的旧子节点,做很多额外的工作

一般都用数据中的唯一值,比如ID这种,或者实在不行使用UUID库。

以上是关于Vue中key的作用的主要内容,如果未能解决你的问题,请参考以下文章

*vue v-for中 key 值的作用—key不能用index的值*

Vue.js:手风琴在 for 循环中不起作用

vue中v-for的用法以及参数的作用

图解vue中 v-for 的 :key 的作用,虚拟dom Diff算法

使用 p 标签的嵌套 v-for 循环在 Vue.js 中不起作用

vue中key的作用 v-for里警告 v-if的复用