• key属性是DOM元素的唯一标识。当数组发生增删时， 默认需要把发生改动的项目全部进行重绘 --- 浪费资源；当添加唯一标识之后， 一旦发生 增删操作之后，重绘之前会检测新绘制的元素 和 已有的元素 是否存在相同的 key ， 相同则复用 --- 不浪费
• 没有增删操作的场景下，key没有用

总结：

1、 key的作用主要是为了高效的更新虛拟DOM，其原理是vue在patch（补丁）过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。
2、 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug。如某行数据不该更新的却更新了。
3、vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

<template>
  <div>
    <!-- 如何备份之前书写的代码? -->
    <!-- 由于 main.js 固定加载 App.vue 文件进行展示 -->
    <!-- 把App.vue复制改名以后, 此文件就不会运行 用来备份代码 -->
    <!-- 复习时, 改名为 App.vue 就可以执行 -->
    <!-- 小技巧: 提示 按ESC, 重新输vfor 有更多提示 -->

    <!-- 
      for循环生成的列表, 当出现增删操作时, 为了提高DOM的渲染效率, 提供了唯一标识 key 属性

      默认场景: 当列表中间出现删除/增加操作时, 需要把变化的DOM元素都删除然后重新绘制 -- 浪费,多余 应该复用

      现在场景: 为每个数据项添加唯一标识, 当页面发生变化时, 同样唯一标识的元素 会直接复用 -- 省略删除和创建过程 --提高效率

      唯一标识: key
      key只有在删除或修改场景下才有用, 平常用不上

      vscode是静态分析: 强制要求写key, 不写就爆红提示你..

      用index做序号: 没用 只是为了不爆红

      如果实际工作的话, 每个数据项应该有自己的唯一标识id
      :key="数据项.id" 才是正常写法

      也可以关闭插件的报错功能:
      设置->搜索 vetur.validation.template  把勾选去掉
     -->
    <div v-for="(skill, index) in skills" :key="index">
      {{ skill }}
    </div>
    <!-- 报错分两种报错: -->
    <!-- 静态报错: VSCode会自动分析代码,判断是否有错误--会误报 -->
    <!-- 动态报错: 代码运行时浏览器的后台输出 -- 准确无误 -->
  </div>
</template>

<script>
export default {
  // vdata
  data() {
    return {
      skills: ['html', 'css', 'js', 'express', 'mysql'],
    }
  },
}
</script>

<style lang="scss" scoped></style>
复制