for根据ID去重_Vue中v-for配合key使用的重要性

在 Vue 官网的 风格指南中，有很多对于Vue编码的风格的要求和建议。 在这里，主要解释在 编码指南中，为 优先级A：必要的 的编码规范的 为 v-for 设置键值
相信在编码初期，很多人都不理解 key 的作用，因为似乎有与没有，似乎都能完成元素的渲染。（当然，用过 Vue CLI，并设置了 ESlint 的朋友，应该会发现 ESLint 强制要求我们在使用 v-for 时，加入 key，否则在编译阶段会报错）

在官网文档中，对 key 做出的诠释是：
如果不使用 key， Vue 会使用一种 最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化 重新排列元素顺序，并且会 移除 key 不存在的元素。

由官方文档，则说明了 key 在 v-for 渲染的元素中，主要是作为唯一标识去让 Vue "认为"每个元素都是独一无二的，而不会因为为了减小渲染而复用或修改之前相类似的元素，而导致一些特殊情况的出现。

不使用key的情况

<

测试情况

在上面这个情况中，当我们选中香蕉，再添加一个榴莲时，会发现，之前选中的香蕉，变为选中苹果

这显然不是我们想要的效果，我们预期的效果是添加一个水果后，之前选中的水果不会变化。

---

使用key的情况

<

测试情况

在上面这个情况中，但我们选中香蕉，再添加一个榴莲时，则没有出现选中的水果错位的情况。这和我们的预期一样。

---

分析原因

综上所述，使用 key，在 v-for 渲染的元素中，在某些情况下，出现和预期不一样的效果。 这就是因为，在 Vue渲染 的时候，通过只修改元素中的文字，而不重新生成整个元素，来减小渲染强度（只改变元素的2个文字，再添加一个元素，相比于摧毁所有元素，并重新创建所有元素，显然是前者渲染强度小一些。）

关于ESLint的一些观点

在现在大多数的情况下，我们都会使用 Vue CLI 来完成项目，在 Vue CLI 中可以选用 ESLint 来对代码进行一些格式规范、和编码规范。 当然，它有些时候对于编码的格式太过于严苛，而导致很多初期使用的人，会很头疼，这里可以推荐使用 VSCode 配合 Prettier 插件，在保存时，进行自动格式调整。减小在格式调整上花的时间，又同时可以让 ESLint 对编码进行一些检测，比如上面的例子，在 v-for 中，不使用 key，则会不通过检测，并给出相应的提示。

以上便是该篇博文的全部内容，欢迎各位访问我的个人博客。
若有任何错误和建议，还希望指教！！！

VicoHu-个人博客​www.vicohu.com