Vue中v-for中key的作用

1.使用key变化

1.有key代码：绑定id

2.未点击添加按钮：

3.点击之后：

2.未使用key变化

1.此刻中绑定inde == 未使用key效果：

2.输入表单数据，未添加老刘前：

3.添加老刘后：

3.key原理

首先：当你未绑定key值的时候，Vue中会将index自动绑定到key中。

3.1 key绑定index时

过程：其中，新虚拟DOM会和之前的虚拟DOM使用key值进行整个比较，此时第一行，文本< 张三 – 18 > 与< 老刘 – 30 >不同，将自己的文本内容生成新的真实DOM上，但是input标签相同，因为此时都是虚拟DOM，所以并不包括input输入框中的值。==>相等。将之前的input标签进行复用 来提高效率。以此类推进行比较。生成真实DOM。

3.2key绑定id时

过程：其中，新虚拟DOM会和之前的虚拟DOM使用key值进行整个比较，此时第一行，key值不同，直接生成新的真实DOM上。之后进行下面比较，三行都能找到相应的DOM并且相同，所以直接复用。

4.面试题：

面试题：react、vue中的key有什么作用？（key的内部原理）

1. 虚拟DOM中key的作用：

​ key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

​ 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

1. 对比规则：

   (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

   ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

   ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

​ (2).旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。

1. 用index作为key可能会引发的问题：

   (1).若对数据进行：逆序添加、逆序删除等破坏顺序操作:

   会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

   (2).如果结构中还包含输入类的DOM：

   会产生错误DOM更新 ==> 界面有问题。

2. 开发中如何选择key?:

   1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

   2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key 是没有问题的。

   ​

总结回答：

1. key主要作为 Vue 的虚拟 DOM 对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】
2. 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。其中当遇见key值相同的DOM比较其中内容，相同的话直接复用【旧虚拟DOM】。若不同的话，则根据新的虚拟DOM生成真实的DOM。
3. 倘若没有绑定好key，并且随后的对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
4. 倘若没有绑定好key，结构中还包含输入类的DOM，可能会产生错误DOM更新 ==> 界面有问题。