v-for循环中 ,key怎么完全不起作用?

我的顺溜之 前端之路(急难千金方(个人版/滑稽脸)----------)

今天写v-for循环时候,使用key来保证数据的唯一性
却发现数据变动时候,我的Key并未生效。
没图不太直观

(盗图自简书65_刘璐)v-for循环中 ,key怎么完全不起作用?
如上所示数据变动前的abcd和变动后的abcd,不加key的话二者之间的联系就是一种数组内的对位联系(新旧数组索引相同处),加了key之后,就能把数据准确对应联系起来。

一般key 的选用最好是 数字/字符串 形式。

但是 (划重点)我的理解是 key必须要使用你想确定的数据中的独有数据

什么是独有数据 简单来说 就像 身份证

你要确保更改前后的这两个数据的唯一性 你必须让他们掏出同一张身份证

实践一下,这里我选择 key 为 id
v-for循环中 ,key怎么完全不起作用?
(此时chara数组中的id出现了重复)
v-for循环中 ,key怎么完全不起作用?
(我再向数组中添加 具有重复id为2的数据)

看一下页面把

v-for循环中 ,key怎么完全不起作用?
(我先勾选了chara数组中的索引位置为2的数据)

输入奥特特曼 点击添加在第三位
v-for循环中 ,key怎么完全不起作用?
(勾选项变成了奥特曼,就明明没有决定是你)

如此说明,key 选取的 一定要保证它是各个数据中的特有值。

ps,千万不要把 key值选作索引 key选作索引结果就是 “我既不报错更不生效”

错误示范:v-for="(value,index) in Array" :key=“index” ;

每次更新数组 索引都在变的呀 默认不加key就是按照索引值来联系数据的呀

对了,我一开就是用 索引这个二五仔 才整的这么一出

以上。