。 4.之所以要加上key是因为vue源码是内部数据驱动，通过改变数据进而达到改变视图的效果，加上k ...

前言 在vue中使用v-for时，一直有几个疑问： v-for为什么要加key 为什么有时候用index作为key会出错 带着这个疑问，结合各种博客和源码，终于有了点眉目。 virtual dom 要理解diff的过程，先要对virtual dom有个了解，这里简单介绍下 ...

v-for中的key来给每个节点做一个唯一的标识，diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点；key的主要作用是为了高效的更新虚拟dom，另外vue在使用相同标签名元素的过渡切换时，也会使用到key属性，目的是让vue可以区分它们，否则vue只会替换其内 ...

说到这个问题想必要举个例子了 image 没有key <div id="app"> <div> <input ...

在日常项目中，我们通常不会注意到这一个点，因为具体在体现上并没有什么差别，但在性能层面确实不同的，也是需要我们去注意的一点，如果在小项目的情况下，可能不会存在太大的差别，但在大型的项目中，就往往会影响，比如页面加载太慢，导致的用户体验差。主要的原因还是源于 在循环中我们没有加 key 这个标识 ...

如下图： 若用Index作为key，当数据更新时，虚拟DOM重新进行对比(diff): 首先,key为0时，文本节点出现不一致,所以要生成一个新的真实DOM 其次，对比input节点，因为虚拟DOM没有value属性，所以input节点是一样的，直接复用 以此类推，就会出现节点错位问题 ...

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM v-for中：key的作用总结 key可用来唯一标识组件元素 ...

一、目的： 1、key的作用主要是为了高效的更新虚拟DOM。（此类原理可查看各类文档） 2、防止不必要的bug出现。 二、如果使用index作为key来使用，会出现bug情形。 如果仅是为了高效更新DOM，可能人们不会在意，殊不知，使用index作为key，还会出现bug，如下情 ...